``` ```csharp private bool basicIsOpen; private List basicNavItems = [ new() { Text = "Home", IconName = BitIconName.Home, Url = "HomePage", Data = 13, }, new() { Text = "AdminPanel", IconName = BitIconName.Admin, ChildItems = [ new() { Text = "Dashboard", IconName = BitIconName.BarChartVerticalFill, Url = "DashboardPage", Data = 63, }, new() { Text = "Categories", IconName = BitIconName.BuildQueue, Url = "CategoriesPage", }, new() { Text = "Products", IconName = BitIconName.Product, Url = "ProductsPage", } ] }, new() { Text = "Todo", IconName = BitIconName.ToDoLogoOutline, Url = "TodoPage", }, new() { Text = "Settings", IconName = BitIconName.Equalizer, Url = "SettingsPage", Data = 85, }, new() { Text = "Terms", IconName = BitIconName.EntityExtraction, Url = "TermsPage", } ]; ``` \n**Width**: ```razor

FitWidth

FullWidth

Width / ToggledWidth

``` ```csharp private bool fitWidthIsOpen; private bool fullWidthIsOpen; private bool widthIsOpen; // one tree per panel: the expanded state of an item lives on the item itself private List fitWidthNavItems = CreateBasicNavItems(); private List fullWidthNavItems = CreateBasicNavItems(); private List widthNavItems = CreateBasicNavItems(); private static List CreateBasicNavItems() => [ new() { Text = "Home", IconName = BitIconName.Home, Url = "HomePage", Data = 13, }, new() { Text = "AdminPanel", IconName = BitIconName.Admin, ChildItems = [ new() { Text = "Dashboard", IconName = BitIconName.BarChartVerticalFill, Url = "DashboardPage", Data = 63, }, new() { Text = "Categories", IconName = BitIconName.BuildQueue, Url = "CategoriesPage", }, new() { Text = "Products", IconName = BitIconName.Product, Url = "ProductsPage", } ] }, new() { Text = "Todo", IconName = BitIconName.ToDoLogoOutline, Url = "TodoPage", }, new() { Text = "Settings", IconName = BitIconName.Equalizer, Url = "SettingsPage", Data = 85, }, new() { Text = "Terms", IconName = BitIconName.EntityExtraction, Url = "TermsPage", } ]; ``` \n**Rail**: ```razor

ExpandOnHover

NoToggle

``` ```csharp private bool expandOnHoverIsOpen; private bool noToggleIsOpen; // one tree per panel: the expanded state of an item lives on the item itself private List expandOnHoverNavItems = CreateBasicNavItems(); private List noToggleNavItems = CreateBasicNavItems(); private static List CreateBasicNavItems() => [ new() { Text = "Home", IconName = BitIconName.Home, Url = "HomePage", Data = 13, }, new() { Text = "AdminPanel", IconName = BitIconName.Admin, ChildItems = [ new() { Text = "Dashboard", IconName = BitIconName.BarChartVerticalFill, Url = "DashboardPage", Data = 63, }, new() { Text = "Categories", IconName = BitIconName.BuildQueue, Url = "CategoriesPage", }, new() { Text = "Products", IconName = BitIconName.Product, Url = "ProductsPage", } ] }, new() { Text = "Todo", IconName = BitIconName.ToDoLogoOutline, Url = "TodoPage", }, new() { Text = "Settings", IconName = BitIconName.Equalizer, Url = "SettingsPage", Data = 85, }, new() { Text = "Terms", IconName = BitIconName.EntityExtraction, Url = "TermsPage", } ]; ``` \n**Logo**: ```razor

Logo

Logo and title

``` ```csharp private bool iconUrlIsOpen; private bool headerTextIsOpen; // one tree per panel: the expanded state of an item lives on the item itself private List iconUrlNavItems = CreateBasicNavItems(); private List headerTextNavItems = CreateBasicNavItems(); private static List CreateBasicNavItems() => [ new() { Text = "Home", IconName = BitIconName.Home, Url = "HomePage", Data = 13, }, new() { Text = "AdminPanel", IconName = BitIconName.Admin, ChildItems = [ new() { Text = "Dashboard", IconName = BitIconName.BarChartVerticalFill, Url = "DashboardPage", Data = 63, }, new() { Text = "Categories", IconName = BitIconName.BuildQueue, Url = "CategoriesPage", }, new() { Text = "Products", IconName = BitIconName.Product, Url = "ProductsPage", } ] }, new() { Text = "Todo", IconName = BitIconName.ToDoLogoOutline, Url = "TodoPage", }, new() { Text = "Settings", IconName = BitIconName.Equalizer, Url = "SettingsPage", Data = 85, }, new() { Text = "Terms", IconName = BitIconName.EntityExtraction, Url = "TermsPage", } ]; ``` \n**Search**: ```razor

Last searched term: @lastSearchedTerm

``` ```csharp private bool searchIsOpen; private string? searchText; private string? lastSearchedTerm; private List searchNavItems = [ new() { Text = "Home", IconName = BitIconName.Home, Url = "HomePage", Data = 13, }, new() { Text = "AdminPanel", IconName = BitIconName.Admin, ChildItems = [ new() { Text = "Dashboard", IconName = BitIconName.BarChartVerticalFill, Url = "DashboardPage", Data = 63, }, new() { Text = "Categories", IconName = BitIconName.BuildQueue, Url = "CategoriesPage", }, new() { Text = "Products", IconName = BitIconName.Product, Url = "ProductsPage", } ] }, new() { Text = "Todo", IconName = BitIconName.ToDoLogoOutline, Url = "TodoPage", }, new() { Text = "Settings", IconName = BitIconName.Equalizer, Url = "SettingsPage", Data = 85, }, new() { Text = "Terms", IconName = BitIconName.EntityExtraction, Url = "TermsPage", } ]; ``` \n**Selection**: ```razor

Selected item: @selectedItem?.Text

Select Settings

``` ```csharp private bool selectionIsOpen; private BitNavItem? selectedItem; // The manual mode reports the clicked item instead of following it, so none of these items carries a URL: // an item with one is still a link, and the click that selects it would navigate away. private List selectionNavItems = [ new() { Text = "Home", IconName = BitIconName.Home, }, new() { Text = "AdminPanel", IconName = BitIconName.Admin, ChildItems = [ new() { Text = "Dashboard", IconName = BitIconName.BarChartVerticalFill }, new() { Text = "Categories", IconName = BitIconName.BuildQueue }, new() { Text = "Products", IconName = BitIconName.Product } ] }, new() { Text = "Todo", IconName = BitIconName.ToDoLogoOutline, }, new() { Text = "Settings", IconName = BitIconName.Equalizer, }, new() { Text = "Terms", IconName = BitIconName.EntityExtraction, } ]; ``` \n**Expansion**: ```razor

``` ```csharp private bool singleExpandIsOpen; private List singleExpandNavItems = [ new() { Text = "Home", IconName = BitIconName.Home, Url = "HomePage", }, new() { Text = "AdminPanel", IconName = BitIconName.Admin, ChildItems = [ new() { Text = "Dashboard", IconName = BitIconName.BarChartVerticalFill, Url = "DashboardPage" }, new() { Text = "Categories", IconName = BitIconName.BuildQueue, Url = "CategoriesPage" }, new() { Text = "Products", IconName = BitIconName.Product, Url = "ProductsPage" } ] }, new() { Text = "Todo", IconName = BitIconName.ToDoLogoOutline, Url = "TodoPage", }, new() { Text = "Settings", IconName = BitIconName.Equalizer, ChildItems = [ new() { Text = "Views", IconName = BitIconName.BarChartVerticalFill, Url = "ViewsPage" }, new() { Text = "Users", IconName = BitIconName.BuildQueue, Url = "UsersPage" } ] }, new() { Text = "Terms", IconName = BitIconName.EntityExtraction, Url = "TermsPage", } ]; ``` \n**Custom items**: ```razor

``` ```csharp private bool customIsOpen; private static readonly BitNavNameSelectors customSelectors = new() { Text = { Name = nameof(CustomNavItem.Name) }, IconName = { Name = nameof(CustomNavItem.Glyph) }, ChildItems = { Name = nameof(CustomNavItem.Children) }, }; public class CustomNavItem { public string? Name { get; set; } public string? Glyph { get; set; } public string? Url { get; set; } public List? Children { get; set; } } private readonly List customNavItems = [ new() { Name = "Home", Glyph = BitIconName.Home, Url = "HomePage", }, new() { Name = "AdminPanel", Glyph = BitIconName.Admin, Children = [ new() { Name = "Dashboard", Glyph = BitIconName.BarChartVerticalFill, Url = "DashboardPage" }, new() { Name = "Categories", Glyph = BitIconName.BuildQueue, Url = "CategoriesPage" }, new() { Name = "Products", Glyph = BitIconName.Product, Url = "ProductsPage" } ] }, new() { Name = "Settings", Glyph = BitIconName.Equalizer, Url = "SettingsPage", } ]; ``` \n**Drawer**: ```razor

Modal, at the end edge

Non-modal

A drawer on every screen

``` ```csharp private bool drawerIsOpen; private bool behaviorIsOpen; private bool alwaysDrawerIsOpen; // one tree per panel: the expanded state of an item lives on the item itself private List drawerNavItems = CreateBasicNavItems(); private List behaviorNavItems = CreateBasicNavItems(); private List alwaysDrawerNavItems = CreateBasicNavItems(); private static List CreateBasicNavItems() => [ new() { Text = "Home", IconName = BitIconName.Home, Url = "HomePage", Data = 13, }, new() { Text = "AdminPanel", IconName = BitIconName.Admin, ChildItems = [ new() { Text = "Dashboard", IconName = BitIconName.BarChartVerticalFill, Url = "DashboardPage", Data = 63, }, new() { Text = "Categories", IconName = BitIconName.BuildQueue, Url = "CategoriesPage", }, new() { Text = "Products", IconName = BitIconName.Product, Url = "ProductsPage", } ] }, new() { Text = "Todo", IconName = BitIconName.ToDoLogoOutline, Url = "TodoPage", }, new() { Text = "Settings", IconName = BitIconName.Equalizer, Url = "SettingsPage", Data = 85, }, new() { Text = "Terms", IconName = BitIconName.EntityExtraction, Url = "TermsPage", } ]; ``` \n**Templates**: ```razor

NavPanel header

@item.Text @if (item.Data is not null) { @item.Data } ``` ```csharp private bool templateIsOpen; private List templateNavItems = [ new() { Text = "Home", IconName = BitIconName.Home, Url = "HomePage", Data = 13, }, new() { Text = "AdminPanel", IconName = BitIconName.Admin, ChildItems = [ new() { Text = "Dashboard", IconName = BitIconName.BarChartVerticalFill, Url = "DashboardPage", Data = 63, }, new() { Text = "Categories", IconName = BitIconName.BuildQueue, Url = "CategoriesPage", }, new() { Text = "Products", IconName = BitIconName.Product, Url = "ProductsPage", } ] }, new() { Text = "Todo", IconName = BitIconName.ToDoLogoOutline, Url = "TodoPage", }, new() { Text = "Settings", IconName = BitIconName.Equalizer, Url = "SettingsPage", Data = 85, }, new() { Text = "Terms", IconName = BitIconName.EntityExtraction, Url = "TermsPage", } ]; ``` \n**Events**: ```razor

Clicked item: @onItemClick?.Text
Toggled item: @onItemToggle?.Text

``` ```csharp private bool eventIsOpen; private BitNavItem? onItemClick; private BitNavItem? onItemToggle; private void HandleOnItemClick(BitNavItem item) { onItemClick = item; } private void HandleOnItemToggle(BitNavItem item) { onItemToggle = item; } private List eventNavItems = [ new() { Text = "Home", IconName = BitIconName.Home, }, new() { Text = "AdminPanel", IconName = BitIconName.Admin, ChildItems = [ new() { Text = "Dashboard", IconName = BitIconName.BarChartVerticalFill }, new() { Text = "Categories", IconName = BitIconName.BuildQueue }, new() { Text = "Products", IconName = BitIconName.Product } ] }, new() { Text = "Todo", IconName = BitIconName.ToDoLogoOutline, }, new() { Text = "Settings", IconName = BitIconName.Equalizer, }, new() { Text = "Terms", IconName = BitIconName.EntityExtraction, } ]; ``` \n**Public APIs**: ```razor Toggle Expand all Collapse all Focus search Clear search

``` ```csharp private bool publicApiIsOpen; private BitNavPanel navPanelRef = default!; private List publicApiNavItems = [ new() { Text = "Home", IconName = BitIconName.Home, Url = "HomePage", Data = 13, }, new() { Text = "AdminPanel", IconName = BitIconName.Admin, ChildItems = [ new() { Text = "Dashboard", IconName = BitIconName.BarChartVerticalFill, Url = "DashboardPage", Data = 63, }, new() { Text = "Categories", IconName = BitIconName.BuildQueue, Url = "CategoriesPage", }, new() { Text = "Products", IconName = BitIconName.Product, Url = "ProductsPage", } ] }, new() { Text = "Todo", IconName = BitIconName.ToDoLogoOutline, Url = "TodoPage", }, new() { Text = "Settings", IconName = BitIconName.Equalizer, Url = "SettingsPage", Data = 85, }, new() { Text = "Terms", IconName = BitIconName.EntityExtraction, Url = "TermsPage", } ]; ``` \n**Grouped**: ```razor

``` ```csharp private bool groupedIsOpen; private List groupedNavItems = [ new() { Text = "Home", IconName = BitIconName.Home, Url = "HomePage", }, new() { Text = "AdminPanel", IconName = BitIconName.Admin, ChildItems = [ new() { Text = "Dashboard", IconName = BitIconName.BarChartVerticalFill, Url = "DashboardPage" }, new() { Text = "Categories", IconName = BitIconName.BuildQueue, Url = "CategoriesPage" }, new() { Text = "Products", IconName = BitIconName.Product, Url = "ProductsPage" } ] }, new() { Text = "Todo", IconName = BitIconName.ToDoLogoOutline, Url = "TodoPage", }, new() { Text = "Settings", IconName = BitIconName.Equalizer, ChildItems = [ new() { Text = "Views", IconName = BitIconName.BarChartVerticalFill, Url = "ViewsPage" }, new() { Text = "Users", IconName = BitIconName.BuildQueue, Url = "UsersPage" } ] }, new() { Text = "Terms", IconName = BitIconName.EntityExtraction, Url = "TermsPage", } ]; ``` \n**StickyEnds**: ```razor

``` ```csharp private bool stickyIsOpen; private List stickyNavItems = [ new() { Text = "Home", IconName = BitIconName.Home, Url = "HomePage", }, new() { Text = "AdminPanel", IconName = BitIconName.Admin, ChildItems = [ new() { Text = "Dashboard", IconName = BitIconName.BarChartVerticalFill, Url = "DashboardPage" }, new() { Text = "Categories", IconName = BitIconName.BuildQueue, Url = "CategoriesPage" }, new() { Text = "Products", IconName = BitIconName.Product, Url = "ProductsPage" } ] }, new() { Text = "Todo", IconName = BitIconName.ToDoLogoOutline, Url = "TodoPage", }, new() { Text = "Settings", IconName = BitIconName.Equalizer, ChildItems = [ new() { Text = "Views", IconName = BitIconName.BarChartVerticalFill, Url = "ViewsPage" }, new() { Text = "Users", IconName = BitIconName.BuildQueue, Url = "UsersPage" } ] }, new() { Text = "Terms", IconName = BitIconName.EntityExtraction, Url = "TermsPage", } ]; ``` \n**Cascading parameters**: ```razor

Cascaded

Own placeholder, cascaded rest

``` ```csharp private bool cascadeIsOpen; private bool cascadeOwnIsOpen; private readonly BitNavPanelParams[] navPanelParams = [ new() { ExpandOnHover = true, SearchBoxPlaceholder = "Find a page...", EmptyListMessage = "No page matches.", ToggleAriaLabel = "Collapse or expand the menu", SearchAnnouncementProvider = count => count == 1 ? "One page matches." : $"{count} pages match.", } ]; // one tree per panel: the expanded state of an item lives on the item itself private List cascadeNavItems = CreateBasicNavItems(); private List cascadeOwnNavItems = CreateBasicNavItems(); private static List CreateBasicNavItems() => [ new() { Text = "Home", IconName = BitIconName.Home, Url = "HomePage", Data = 13, }, new() { Text = "AdminPanel", IconName = BitIconName.Admin, ChildItems = [ new() { Text = "Dashboard", IconName = BitIconName.BarChartVerticalFill, Url = "DashboardPage", Data = 63, }, new() { Text = "Categories", IconName = BitIconName.BuildQueue, Url = "CategoriesPage", }, new() { Text = "Products", IconName = BitIconName.Product, Url = "ProductsPage", } ] }, new() { Text = "Todo", IconName = BitIconName.ToDoLogoOutline, Url = "TodoPage", }, new() { Text = "Settings", IconName = BitIconName.Equalizer, Url = "SettingsPage", Data = 85, }, new() { Text = "Terms", IconName = BitIconName.EntityExtraction, Url = "TermsPage", } ]; ``` \n**Color**: ```razor

``` ```csharp private bool colorIsOpen; private List colorNavItems = [ new() { Text = "Home", IconName = BitIconName.Home, Url = "HomePage", Data = 13, }, new() { Text = "AdminPanel", IconName = BitIconName.Admin, ChildItems = [ new() { Text = "Dashboard", IconName = BitIconName.BarChartVerticalFill, Url = "DashboardPage", Data = 63, }, new() { Text = "Categories", IconName = BitIconName.BuildQueue, Url = "CategoriesPage", }, new() { Text = "Products", IconName = BitIconName.Product, Url = "ProductsPage", } ] }, new() { Text = "Todo", IconName = BitIconName.ToDoLogoOutline, Url = "TodoPage", }, new() { Text = "Settings", IconName = BitIconName.Equalizer, Url = "SettingsPage", Data = 85, }, new() { Text = "Terms", IconName = BitIconName.EntityExtraction, Url = "TermsPage", } ]; ``` \n**External Icons**: ```razor

``` ```csharp private bool externalIconIsOpen; private readonly List externalIconNavItems = [ new() { Text = "Home", Icon = BitIconInfo.Fa("solid house"), Url = "HomePage", }, new() { Text = "AdminPanel", Icon = BitIconInfo.Fa("solid user-shield"), ChildItems = [ new() { Text = "Dashboard", Icon = BitIconInfo.Fa("solid chart-simple"), Url = "DashboardPage" }, new() { Text = "Products", Icon = BitIconInfo.Fa("solid box"), Url = "ProductsPage" } ] }, new() { Text = "Settings", Icon = BitIconInfo.Fa("solid gear"), Url = "SettingsPage", } ]; ``` \n**Size**: ```razor

Small

Medium

Large

``` ```csharp private bool sizeIsOpen; // one tree per panel: the expanded state of an item lives on the item itself private List sizeSmallNavItems = CreateBasicNavItems(); private List sizeMediumNavItems = CreateBasicNavItems(); private List sizeLargeNavItems = CreateBasicNavItems(); private static List CreateBasicNavItems() => [ new() { Text = "Home", IconName = BitIconName.Home, Url = "HomePage", Data = 13, }, new() { Text = "AdminPanel", IconName = BitIconName.Admin, ChildItems = [ new() { Text = "Dashboard", IconName = BitIconName.BarChartVerticalFill, Url = "DashboardPage", Data = 63, }, new() { Text = "Categories", IconName = BitIconName.BuildQueue, Url = "CategoriesPage", }, new() { Text = "Products", IconName = BitIconName.Product, Url = "ProductsPage", } ] }, new() { Text = "Todo", IconName = BitIconName.ToDoLogoOutline, Url = "TodoPage", }, new() { Text = "Settings", IconName = BitIconName.Equalizer, Url = "SettingsPage", Data = 85, }, new() { Text = "Terms", IconName = BitIconName.EntityExtraction, Url = "TermsPage", } ]; ``` \n**Style & Class**: ```razor

Styles & Classes

CSS variables

``` ```csharp private bool classStyleIsOpen; private bool cssVariablesIsOpen; // one tree per panel: the expanded state of an item lives on the item itself private List classStyleNavItems = CreateBasicNavItems(); private List cssVariablesNavItems = CreateBasicNavItems(); private static List CreateBasicNavItems() => [ new() { Text = "Home", IconName = BitIconName.Home, Url = "HomePage", Data = 13, }, new() { Text = "AdminPanel", IconName = BitIconName.Admin, ChildItems = [ new() { Text = "Dashboard", IconName = BitIconName.BarChartVerticalFill, Url = "DashboardPage", Data = 63, }, new() { Text = "Categories", IconName = BitIconName.BuildQueue, Url = "CategoriesPage", }, new() { Text = "Products", IconName = BitIconName.Product, Url = "ProductsPage", } ] }, new() { Text = "Todo", IconName = BitIconName.ToDoLogoOutline, Url = "TodoPage", }, new() { Text = "Settings", IconName = BitIconName.Equalizer, Url = "SettingsPage", Data = 85, }, new() { Text = "Terms", IconName = BitIconName.EntityExtraction, Url = "TermsPage", } ]; ``` \n**RTL**: ```razor

``` ```csharp private bool rtlIsOpen; private List rtlNavItems = [ new() { Text = "خانه", IconName = BitIconName.Home, Url = "HomePage", }, new() { Text = "ادمین پنل", IconName = BitIconName.Admin, ChildItems = [ new() { Text = "داشبورد", IconName = BitIconName.BarChartVerticalFill, Url = "DashboardPage" }, new() { Text = "دسته‌ها", IconName = BitIconName.BuildQueue, Url = "CategoriesPage" }, new() { Text = "کالاها", IconName = BitIconName.Product, Url = "ProductsPage" } ] }, new() { Text = "وظایف", IconName = BitIconName.ToDoLogoOutline, Url = "TodoPage", }, new() { Text = "تنظیمات", IconName = BitIconName.Equalizer, Url = "SettingsPage" }, new() { Text = "قوانین", IconName = BitIconName.EntityExtraction, Url = "TermsPage", } ]; ```