Components

Navlist

The navbar's items in a column: a sidebar's navigation, a settings page's sections. Flux documents it on its navbar page.

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

Navlist

Rows with an icon each, the first one current.

NavlistExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

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

Live result

Navigation groups

A heading over its rows.

NavlistGroupsExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class NavlistGroupsExample : Component
{
    protected override Component? Render() =>
        Ui.Navlist.Class("w-64")[
            Ui.NavlistGroup.Heading("Account")[
                Ui.NavlistItem.Key("profile").Href("#").Current(true)["Profile"],
                Ui.NavlistItem.Key("settings").Href("#")["Settings"],
                Ui.NavlistItem.Key("billing").Href("#")["Billing"]
            ]
        ];
}

Live result

Collapsible groups

Expandable() folds a group's rows away under its heading: open unless Expanded(false), and opened with a click, Enter or Space before any runtime has booted.

NavlistCollapsibleExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class NavlistCollapsibleExample : Component
{
    protected override Component? Render() =>
        Ui.Navlist.Class("w-64")[
            Ui.NavlistItem.Key("dashboard").Href("#").Icon(Ui.IconName.Home).Current(true)["Dashboard"],
            Ui.NavlistItem.Key("transactions").Href("#").Icon(Ui.IconName.ListBullet)["Transactions"],
            Ui.NavlistGroup.Key("account").Heading("Account").Expandable()[
                Ui.NavlistItem.Key("profile").Href("#")["Profile"],
                Ui.NavlistItem.Key("settings").Href("#")["Settings"],
                Ui.NavlistItem.Key("billing").Href("#")["Billing"]
            ],
            Ui.NavlistGroup.Key("team").Heading("Team").Expandable().Expanded(false)[
                Ui.NavlistItem.Key("members").Href("#")["Members"]
            ]
        ];
}

Live result

Badges

A count or a word at the end of a row.

NavlistBadgesExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class NavlistBadgesExample : Component
{
    protected override Component? Render() =>
        Ui.Navlist.Class("w-64")[
            Ui.NavlistItem.Key("home").Href("#").Icon(Ui.IconName.Home).Current(true)["Home"],
            Ui.NavlistItem.Key("inbox").Href("#").Icon(Ui.IconName.Envelope).Badge("12")["Inbox"],
            Ui.NavlistItem.Key("contacts").Href("#").Icon(Ui.IconName.UserGroup)["Contacts"],
            Ui.NavlistItem.Key("calendar").Href("#").Icon(Ui.IconName.CalendarDays).Badge("Pro").BadgeColor(Ui.Color.Lime)["Calendar"]
        ];
}

Live result

Behaviour

The current row

A row is a NavLink underneath, so Current is worked out from the route and said with aria-current="page", unless you state it, as Flux's current does: that is how a row stays current across a whole section. The current row is inked in the accent; Accent(false) inks it as the page is. The list is a <nav>, as Flux's is.

Groups that fold

A group is a heading over its rows. Expandable() makes it a disclosure: the heading becomes the control, a chevron says which way it is, and a rule joins the rows under it. It is a <details>, so it folds with a click, Enter or Space and no runtime at all, and is open unless Expanded(false), as Flux's is.

Expanded with OnExpandedChange hands the state to the page: a navigation that opens the group holding the current page, or a filter that opens every group with a match. Flux neither animates nor remembers a fold, and neither does the kit.

In a sidebar that folds to a rail

Inside a Ui.Sidebar the list is the sidebar's own, Ui.SidebarNav of Ui.SidebarItems and Ui.SidebarGroups, with the same Href, Icon, Badge, Current, Heading, Expandable and Expanded. A sidebar that is Collapsible(Ui.SidebarCollapsible.Always) narrows to a 56px rail of icons, and there each part changes shape.

In the rail	What happens
An item	Is its icon. The label stays for a screen reader, the count is dropped, and the item's tooltip, a real `Ui.Tooltip` to the right of the icon, says the label (or `Tooltip`). Every item sits in that tooltip, as Flux's does, and it is drawn only while the sidebar is a rail.
A group	Is its `Icon`, and its rows are a menu beside it, Flux's `flux:dropdown position="right" align="start" hover`: it opens while the pointer is on the icon or the menu (only while the sidebar is a rail), on a press, and from the keyboard. The rows are the group's own, so they are written once.
The group's keys	Enter, Space or ArrowDown on the icon opens it, the arrows walk its rows, Escape hands the focus back to the icon, and Tab moves on.
A group without an icon	Is not shown in the rail.

The sidebar, its rail and how the reader's choice is remembered are the sidebar layout's.

Reference

`Ui.Navlist`

flux:navlist

A <nav> of links in a column: a sidebar's, a settings page's sections.

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

`Ui.NavlistItem`

flux:navlist.item

One row. Its children are its words.

Step	Takes	What it does
`.Href(…)`	a route, or a URL string	Where it goes.
`.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.
`.Badge(…)`	a string, or a component	A count or a word at the end of the row: "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 row is inked in the accent. On unless false.

`Ui.NavlistGroup`

flux:navlist.group

A titled run of rows, or one that folds away under its heading.

Step	Takes	What it does
`.Heading(…)`	`string`	The group's title.
`.Expandable()`	`bool`	Makes it a <details> that folds its rows away under the heading.
`.Expanded()`	`bool`	Whether an expandable group is open. Open unless false.
`.OnExpandedChange(…)`	a handler given the state it is now in: open => …	Runs when the reader opens or closes it.