navigation sidebar

Sidebar

Collapsible nav with persisted state.

$ ndui add sidebar

Component docs

Collapsible vertical nav

Click the hamburger to collapse — the state persists via @alpinejs/persist.

Page content goes here

Sidebar collapses on click. Active item is highlighted.

Source

@{
    var navItems = new[] {
        new { Text = "Dashboard", Href = "/",          Icon = "calendar", Active = true  },
        new { Text = "Customers", Href = "/customers", Icon = "user",     Active = false },
        new { Text = "Products",  Href = "/products",  Icon = "document", Active = false },
        new { Text = "Settings",  Href = "/settings",  Icon = "settings", Active = false },
    };
}

<partial name="_Sidebar" model='@(new { Brand = "Acme", Items = navItems })' />