Navigation
This category is the browser's, deliberately. The megamenu is built on the native popover API, so it gets the top layer, Escape and light-dismiss without a line of script; the tabs are real links, so they are bookmarkable, survive a refresh and answer the back button. Navigation is the first thing a reader touches and the last thing that should wait for a bundle to boot.
Nothing on this page holds state in C#. The megamenu's panels are [popover] elements named by their triggers, and every tab is an <a href>.
namespace Rask.Site.Features.UiKit;
/// <summary>
/// daisyUI's Navigation category, drawn with the kit.
/// </summary>
/// <remarks>
/// Two components here are opened by the BROWSER rather than by C#, and both on purpose. The
/// megamenu is built on the native popover API, and the tab row is made of links. Navigation is the
/// first thing a reader touches and the last thing that should wait for a bundle.
/// </remarks>
public sealed partial class UiKitNavigationDemo : Component
{
/// <inheritdoc />
protected override Component? Render() =>
[
Section(
"Megamenu",
"Native popovers: the browser supplies the top layer, Escape and light-dismiss, and the "
+ "whole thing works before any runtime has booted. daisyUI defines no megamenu-open class, "
+ "so there is nothing for a page to drive.",
Div.Data(Testid("ui-megamenu")).Class("min-h-32")[
UiMegamenu.Wide(true)[
UiMegamenuPanel.Key("products").Trigger("Products").Id("mm-products")[
Div.Class("grid gap-2 p-4 sm:grid-cols-2")[
PanelLink("a", "Framework", "The renderer and the chain."),
PanelLink("b", "CLI", "Scaffolding and deploys."),
PanelLink("c", "UI kit", "The components on this page."),
PanelLink("d", "Dashboard", "The operator console.")
]
],
UiMegamenuPanel.Key("company").Trigger("Company").Id("mm-company")[
Div.Class("grid gap-2 p-4")[
PanelLink("e", "About", "Why this exists."),
PanelLink("f", "Governance", "How decisions are made.")
]
]
]
]),
Section(
"Tabs",
"Links, not a selected index — the one component in the kit that deliberately did not move "
+ "onto C# state. A tab that is a URL is bookmarkable, survives a refresh and answers the "
+ "back button.",
Div.Data(Testid("ui-tabs")).Class("space-y-4")[
UiTabs.Style(UiTabStyle.Box)[
UiTab.Key("all").Href("#all").Label("All").Active(true).Count("128"),
UiTab.Key("open").Href("#open").Label("Open").Count("12"),
UiTab.Key("failed").Href("#failed").Label("Failed").Count("3").Alarm(true)
],
UiTabs.Style(UiTabStyle.Border).Size(UiSize.Sm)[
UiTab.Key("b1").Href("#one").Label("Bordered").Active(true),
UiTab.Key("b2").Href("#two").Label("Second"),
UiTab.Key("b3").Href("#three").Label("Unavailable").Disabled(true)
],
UiTabs.Style(UiTabStyle.Lift)[
UiTab.Key("l1").Href("#one").Label("Lifted").Active(true),
UiTab.Key("l2").Href("#two").Label("Second")
]
]),
Section(
"Menu, steps, breadcrumbs, pagination and the dock",
"The rest of the category, each a real link where it navigates.",
Div.Data(Testid("ui-nav-rest")).Class("space-y-4")[
UiMenu.Size(UiSize.Sm).Horizontal(true)[
UiMenuItem.Key("m1").Text("Overview").Href("#overview").Active(true),
UiMenuItem.Key("m2").Text("Queues").Href("#queues"),
UiMenuItem.Key("m3").Text("Logs").Href("#logs")
],
UiSteps[
UiStep.Key("s1").Text("Ordered").Tone(UiTone.Success),
UiStep.Key("s2").Text("Packed").Tone(UiTone.Success),
UiStep.Key("s3").Text("Shipped")
],
// Already data-shaped: the crumbs are a list of (text, href), and the last one has no
// href because the page you are on is not a link to itself.
UiBreadcrumbs.Items([("Home", "#home"), ("Orders", "#orders"), ("ord_18f", null)])
])
];
private static Dictionary<string, string?> Testid(string value) => new() { ["testid"] = value };
private static Component PanelLink(string key, string title, string blurb) =>
A.Key(key).Href("#").Class("block rounded-lg p-2 no-underline hover:bg-base-200")[
Div.Class("text-sm font-medium")[title],
Div.Class("text-xs opacity-60")[blurb]
];
private static Component Section(string heading, string blurb, Component body) =>
Div.Key(heading).Class("mb-8")[
H2.Class("text-lg font-semibold tracking-tight")[heading],
P.Class("mt-1 mb-3 text-sm text-ui-muted")[blurb],
body
];
}
Megamenu
Native popovers: the browser supplies the top layer, Escape and light-dismiss, and the whole thing works before any runtime has booted. daisyUI defines no megamenu-open class, so there is nothing for a page to drive.
Tabs
Links, not a selected index — the one component in the kit that deliberately did not move onto C# state. A tab that is a URL is bookmarkable, survives a refresh and answers the back button.
Menu, steps, breadcrumbs, pagination and the dock
The rest of the category, each a real link where it navigates.
- Ordered
- Packed
- Shipped