Components

Navbar

A header's links in a row. The current one is inked and underlined in the accent, worked out from the route; an icon leads, a badge trails, and an item with nowhere to go opens a menu.

Drawn and behaving as Flux UI's navbar does, measured against its live docs.

Navbar

Links in a row, the first one current.

NavbarExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class NavbarExample : Component
{
    protected override Component? Render() =>
        Ui.Navbar[
            Ui.NavbarItem.Key("home").Href("#").Current(true)["Home"],
            Ui.NavbarItem.Key("features").Href("#")["Features"],
            Ui.NavbarItem.Key("pricing").Href("#")["Pricing"],
            Ui.NavbarItem.Key("about").Href("#")["About"]
        ];
}

Live result

With icons

An icon before each item's words.

NavbarIconsExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class NavbarIconsExample : Component
{
    protected override Component? Render() =>
        Ui.Navbar[
            Ui.NavbarItem.Key("home").Href("#").Icon(Ui.IconName.Home).Current(true)["Home"],
            Ui.NavbarItem.Key("features").Href("#").Icon(Ui.IconName.PuzzlePiece)["Features"],
            Ui.NavbarItem.Key("pricing").Href("#").Icon(Ui.IconName.CurrencyDollar)["Pricing"],
            Ui.NavbarItem.Key("about").Href("#").Icon(Ui.IconName.User)["About"]
        ];
}

Live result

With badges

A count or a word after the words, in any colour.

NavbarBadgesExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class NavbarBadgesExample : Component
{
    protected override Component? Render() =>
        Ui.Navbar[
            Ui.NavbarItem.Key("home").Href("#").Current(true)["Home"],
            Ui.NavbarItem.Key("inbox").Href("#").Badge("12")["Inbox"],
            Ui.NavbarItem.Key("contacts").Href("#")["Contacts"],
            Ui.NavbarItem.Key("calendar").Href("#").Badge("Pro").BadgeColor(Ui.Color.Lime)["Calendar"]
        ];
}

Live result

Dropdown navigation

An item with no Href is a button, and a dropdown makes it open a menu of links. The current item here is drawn in the page's ink: Accent(false).

NavbarDropdownExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class NavbarDropdownExample : Component
{
    protected override Component? Render() =>
        Ui.Navbar[
            Ui.NavbarItem.Key("dashboard").Href("#").Current(true).Accent(false)["Dashboard"],
            Ui.NavbarItem.Key("transactions").Href("#")["Transactions"],
            Ui.Dropdown.Key("account")[
                Ui.NavbarItem.IconTrailing(Ui.IconName.ChevronDown)["Account"],
                Ui.Navmenu[
                    Ui.NavmenuItem.Href("#")["Profile"],
                    Ui.NavmenuItem.Href("#")["Settings"],
                    Ui.NavmenuItem.Href("#")["Billing"]
                ]
            ]
        ];
}

Live result

Behaviour

The current item

Current is worked out for you: an item given a generated route compares it with the page being shown. Set it to say so yourself, as Flux's current does, which is how an item stays current across a whole section, and how a string link (Href("#") here) is marked. The current item carries aria-current="page", is inked in the accent and underlined with it: a 2px bar 12px under the item, the navbar's bottom edge. Accent(false) draws both in the page's ink.

A link, or the button that opens a menu

An item with an Href is a link: a generated route navigates inside the app under its path base, a string is an ordinary link. An item with none is a <button>, the trigger of a dropdown: Ui.Dropdown[Ui.NavbarItem.IconTrailing(Ui.IconName.ChevronDown)["Account"], Ui.Navmenu[…]]. Ui.Navmenu is the dropdown's list of links, on the dropdown page.

A landmark

The navbar is a <nav>, as Flux's is, so a screen reader lists it among the page's landmarks. The same items in a column are Ui.Navlist; a header around them is the header layout's Ui.Header.

Reference

`Ui.Navbar`

flux:navbar

A <nav> of links in a row, across a header.

No steps of its own: what goes inside it is its content.

`Ui.NavbarItem`

flux:navbar.item

One link. Its children are its words.

Step	Takes	What it does
`.Href(…)`	a route, or a URL string	Where it goes. Without one it is the <button> that opens a menu.
`.Current()`	`bool`	Whether it is the page being shown. Worked out from a generated route when unset.
`.Icon(…)`	`Ui.IconName` — one of 317 names	An icon before the words.
`.IconTrailing(…)`	`Ui.IconName` — one of 317 names	An icon after the words: the chevron of an item that opens a menu.
`.Badge(…)`	a string, or a component	A count or a word after the words: "12", "Pro".
`.BadgeColor(…)`	Ui.Color: one of Tailwind's hues, each a step too (.Blue)	The badge's colour. Zinc when unset.
`.BadgeVariant(…)`	`Ui.NavBadgeVariant` Solid Outline Each is a step of its own too, unless an HTML tag has its name.	How the badge is drawn.
`.Accent()`	`bool`	Whether the current item is inked and underlined in the accent. On unless false.