\n**Basic**: ```razor ``` ```csharp private static readonly List basicNavItems = [ new() { Text = "bit platform", Description = "the bit platform description", ChildItems = [ new() { Text = "Home", IconName = BitIconName.Home, Url = "https://bitplatform.dev/" }, new() { Text = "Products & Services", ChildItems = [ new() { Text = "Project Templates", ChildItems = [ new() { Text = "Todo sample", IconName = BitIconName.ToDoLogoOutline, Url = "https://bitplatform.dev/templates/overview" }, new() { Text = "AdminPanel sample", IconName = BitIconName.LocalAdmin, Url = "https://bitplatform.dev/templates/overview" }, ] }, new() { Text = "BlazorUI", IconName = BitIconName.F12DevTools, Url = "https://bitplatform.dev/components" }, new() { Text = "Cloud hosting solutions", IconName = BitIconName.Cloud, Url = "https://bitplatform.dev/#", IsDisabled = true }, new() { Text = "Bit academy", IconName = BitIconName.LearningTools, Url = "https://bitplatform.dev/#", IsDisabled = true }, ] }, new() { Text = "Pricing", IconName = BitIconName.Money, Url = "https://bitplatform.dev/pricing" }, new() { Text = "About", IconName = BitIconName.Info, Url = "https://bitplatform.dev/about-us" }, new() { Text = "Contact us", IconName = BitIconName.Contact, Url = "https://bitplatform.dev/contact-us" }, ], }, new() { Text = "Community", ChildItems = [ new() { Text = "LinkedIn", IconName = BitIconName.LinkedInLogo, Url = "https://www.linkedin.com/company/bitplatformhq" }, new() { Text = "Twitter", IconName = BitIconName.Globe, Url = "https://twitter.com/bitplatformhq" }, new() { Text = "GitHub repo", IconName = BitIconName.GitGraph, Url = "https://github.com/bitfoundation/bitplatform" }, ] }, new() { Text = "Iconography", IconName = BitIconName.AppIconDefault, Url = "/iconography" }, ]; ``` \n**Grouped & Separator**: ```razor ``` ```csharp private static readonly List carNavItems = [ new() { Text = "Mercedes-Benz", ExpandAriaLabel = "Mercedes-Benz Expanded", CollapseAriaLabel = "Mercedes-Benz Collapsed", Title = "Mercedes-Benz Car Models", IsExpanded = true, Description = "Cars manufactured under the brand of Mercedes-Benz", ChildItems = [ new() { Text = "SUVs", ChildItems = [ new() { Text = "GLA", Url = "https://www.mbusa.com/en/vehicles/class/gla/suv", Target = "_blank" }, new() { Text = "GLB", Url = "https://www.mbusa.com/en/vehicles/class/glb/suv", Target = "_blank" }, new() { Text = "GLC", Url = "https://www.mbusa.com/en/vehicles/class/glc/suv", Target = "_blank" }, ] }, new() { Text = "Sedans & Wagons", ChildItems = [ new() { Text = "A Class", Url = "https://www.mbusa.com/en/vehicles/class/a-class/sedan", Target = "_blank" }, new() { Text = "C Class", Url = "https://www.mbusa.com/en/vehicles/class/c-class/sedan", Target = "_blank" }, new() { Text = "E Class", Url = "https://www.mbusa.com/en/vehicles/class/e-class/sedan", Target = "_blank" }, ] }, new() { Text = "Coupes", ChildItems = [ new() { Text = "CLA Coupe", Url = "https://www.mbusa.com/en/vehicles/class/cla/coupe", Target = "_blank" }, new() { Text = "C Class Coupe", Url = "https://www.mbusa.com/en/vehicles/class/c-class/coupe", Target = "_blank" }, new() { Text = "E Class Coupe", Url = "https://www.mbusa.com/en/vehicles/class/e-class/coupe", Target = "_blank" }, ] }, ] }, new() { Text = "Tesla", ExpandAriaLabel = "Tesla Expanded", CollapseAriaLabel = "Tesla Collapsed", Title = "Tesla Car Models", ChildItems = [ new() { Text = "Model S", Url = "https://www.tesla.com/models", Target = "_blank" }, new() { Text = "Model X", Url = "https://www.tesla.com/modelx", Target = "_blank" }, new() { Text = "Model Y", Url = "https://www.tesla.com/modely", Target = "_blank" }, ] }, ]; private static readonly List separatorNavItems = [ new() { Text = "Home", IconName = BitIconName.Home, Url = "https://bitplatform.dev/" }, new() { Text = "Pricing", IconName = BitIconName.Money, Url = "https://bitplatform.dev/pricing" }, new() { IsSeparator = true }, new() { Text = "LinkedIn", IconName = BitIconName.LinkedInLogo, Url = "https://www.linkedin.com/company/bitplatformhq" }, new() { Text = "GitHub repo", IconName = BitIconName.GitGraph, Url = "https://github.com/bitfoundation/bitplatform" }, new() { IsSeparator = true }, new() { Text = "Contact us", IconName = BitIconName.Contact, Url = "https://bitplatform.dev/contact-us" }, ]; ``` \n**Manual Mode**: ```razor ``` ```csharp private static readonly List foodNavItems = [ new() { Text = "Fast foods", IconName = BitIconName.HeartBroken, IsExpanded = true, Description = "List of fast foods", ChildItems = [ new() { Text = "Burgers", Description = "List of burgers", ChildItems = [ new() { Text = "Beef Burger" }, new() { Text = "Veggie Burger" }, new() { Text = "Bison Burger" }, new() { Text = "Wild Salmon Burger" }, ] }, new() { Text = "Pizza", ChildItems = [ new() { Text = "Cheese Pizza" }, new() { Text = "Veggie Pizza" }, new() { Text = "Pepperoni Pizza" }, new() { Text = "Meat Pizza" }, ] }, new() { Text = "French Fries" }, ] }, new() { Text = "Fruits", IconName = BitIconName.Health, ChildItems = [ new() { Text = "Apple" }, new() { Text = "Orange" }, new() { Text = "Banana" }, ] }, new() { Text = "Ice Cream" }, new() { Text = "Cookie" }, ]; private static List Flatten(IList e) => e.SelectMany(c => Flatten(c.ChildItems)).Concat(e).ToList(); private BitNavItem SelectedItemNav = foodNavItems[0].ChildItems[2]; private string? SelectedItemText = foodNavItems[0].ChildItems[2].Text; private static readonly List> FoodMenuDropdownItems = [ new() { Text = "Beef Burger", Value = "Beef Burger" }, new() { Text = "Veggie Burger", Value = "Veggie Burger" }, new() { Text = "Bison Burger", Value = "Bison Burger" }, new() { Text = "Wild Salmon Burger", Value = "Wild Salmon Burger" }, new() { Text = "Cheese Pizza", Value = "Cheese Pizza" }, new() { Text = "Veggie Pizza", Value = "Veggie Pizza" }, new() { Text = "Pepperoni Pizza", Value = "Pepperoni Pizza" }, new() { Text = "Meat Pizza", Value = "Meat Pizza" }, new() { Text = "French Fries", Value = "French Fries" }, new() { Text = "Apple", Value = "Apple" }, new() { Text = "Orange", Value = "Orange" }, new() { Text = "Banana", Value = "Banana" }, new() { Text = "Ice Cream", Value = "Ice Cream" }, new() { Text = "Cookie", Value = "Cookie" }, ]; ``` \n**Expand & Collapse**: ```razor ``` ```csharp private static readonly List singleExpandNavItems = [ new() { Text = "Fast foods", IconName = BitIconName.HeartBroken, ChildItems = [ new() { Text = "Burgers", ChildItems = [new() { Text = "Beef Burger" }, new() { Text = "Veggie Burger" }] }, new() { Text = "Pizza", ChildItems = [new() { Text = "Cheese Pizza" }, new() { Text = "Meat Pizza" }] }, new() { Text = "French Fries" }, ] }, new() { Text = "Fruits", IconName = BitIconName.Health, ChildItems = [new() { Text = "Apple" }, new() { Text = "Orange" }, new() { Text = "Banana" }] }, new() { Text = "Drinks", IconName = BitIconName.Coffee, ChildItems = [new() { Text = "Water" }, new() { Text = "Tea" }] }, ]; private static readonly List noCollapseNavItems = [ new() { Text = "bit platform", Description = "the bit platform description", ChildItems = [ new() { Text = "Home", IconName = BitIconName.Home, Url = "https://bitplatform.dev/" }, new() { Text = "Products & Services", ChildItems = [ new() { Text = "Project Templates", ChildItems = [ new() { Text = "Todo sample", IconName = BitIconName.ToDoLogoOutline, Url = "https://bitplatform.dev/templates/overview" }, new() { Text = "AdminPanel sample", IconName = BitIconName.LocalAdmin, Url = "https://bitplatform.dev/templates/overview" }, ] }, new() { Text = "BlazorUI", IconName = BitIconName.F12DevTools, Url = "https://bitplatform.dev/components" }, new() { Text = "Cloud hosting solutions", IconName = BitIconName.Cloud, Url = "https://bitplatform.dev/#", IsDisabled = true }, new() { Text = "Bit academy", IconName = BitIconName.LearningTools, Url = "https://bitplatform.dev/#", IsDisabled = true }, ] }, new() { Text = "Pricing", IconName = BitIconName.Money, Url = "https://bitplatform.dev/pricing" }, new() { Text = "About", IconName = BitIconName.Info, Url = "https://bitplatform.dev/about-us" }, new() { Text = "Contact us", IconName = BitIconName.Contact, Url = "https://bitplatform.dev/contact-us" }, ], }, new() { Text = "Community", ChildItems = [ new() { Text = "LinkedIn", IconName = BitIconName.LinkedInLogo , Url = "https://www.linkedin.com/company/bitplatformhq" }, new() { Text = "Twitter", IconName = BitIconName.Globe , Url = "https://twitter.com/bitplatformhq" }, new() { Text = "GitHub repo", IconName = BitIconName.GitGraph , Url = "https://github.com/bitfoundation/bitplatform" }, ] }, new() { Text = "Iconography", IconName = BitIconName.AppIconDefault, Url = "/iconography" }, ]; ``` \n**Custom Templates**: ```razor

@item.Text

@item.Text @if (item.Data is not null) { }

@item.Text custom

``` ```csharp // The Data of an item is whatever the app needs; the template above reads a count off it. private static readonly List mailNavItems = [ new() { Text = "Inbox", IconName = BitIconName.Inbox, Data = 12 }, new() { Text = "Drafts", IconName = BitIconName.EditMail, Data = 2 }, new() { Text = "Sent", IconName = BitIconName.Send }, new() { Text = "Archive", IconName = BitIconName.Archive }, ]; private static readonly List colorNavItems = [ new() { Text = "Home", IconName = BitIconName.Home }, new() { Text = "Products", IconName = BitIconName.Product }, new() { Text = "Settings", IconName = BitIconName.Settings }, ]; private static readonly List carNavItems = [ new() { Text = "Mercedes-Benz", ExpandAriaLabel = "Mercedes-Benz Expanded", CollapseAriaLabel = "Mercedes-Benz Collapsed", Title = "Mercedes-Benz Car Models", IsExpanded = true, Description = "Cars manufactured under the brand of Mercedes-Benz", ChildItems = [ new() { Text = "SUVs", ChildItems = [ new() { Text = "GLA", Url = "https://www.mbusa.com/en/vehicles/class/gla/suv", Target = "_blank" }, new() { Text = "GLB", Url = "https://www.mbusa.com/en/vehicles/class/glb/suv", Target = "_blank" }, new() { Text = "GLC", Url = "https://www.mbusa.com/en/vehicles/class/glc/suv", Target = "_blank" }, ] }, new() { Text = "Sedans & Wagons", ChildItems = [ new() { Text = "A Class", Url = "https://www.mbusa.com/en/vehicles/class/a-class/sedan", Target = "_blank" }, new() { Text = "C Class", Url = "https://www.mbusa.com/en/vehicles/class/c-class/sedan", Target = "_blank" }, new() { Text = "E Class", Url = "https://www.mbusa.com/en/vehicles/class/e-class/sedan", Target = "_blank" }, ] }, new() { Text = "Coupes", ChildItems = [ new() { Text = "CLA Coupe", Url = "https://www.mbusa.com/en/vehicles/class/cla/coupe", Target = "_blank" }, new() { Text = "C Class Coupe", Url = "https://www.mbusa.com/en/vehicles/class/c-class/coupe", Target = "_blank" }, new() { Text = "E Class Coupe", Url = "https://www.mbusa.com/en/vehicles/class/e-class/coupe", Target = "_blank" }, ] }, ] }, new() { Text = "Tesla", ExpandAriaLabel = "Tesla Expanded", CollapseAriaLabel= "Tesla Collapsed", Title = "Tesla Car Models", ChildItems = [ new() { Text = "Model S", Url = "https://www.tesla.com/models", Target = "_blank" }, new() { Text = "Model X", Url = "https://www.tesla.com/modelx", Target = "_blank" }, new() { Text = "Model Y", Url = "https://www.tesla.com/modely", Target = "_blank" }, ] }, ]; ``` \n**Events**: ```razor

Clicked Item: @ClickedItem?.Text
Selected Item: @SelectedItem?.Text
Toggled Item: @(ToggledItem is null ? "N/A" : $"{ToggledItem.Text} ({(ToggledItem.IsExpanded ? "Expanded" : "Collapsed")})")

``` ```csharp private BitNavItem ClickedItem = default!; private BitNavItem SelectedItem = default!; private BitNavItem ToggledItem = default!; private static readonly List foodNavItems = [ new() { Text = "Fast foods", IconName = BitIconName.HeartBroken, IsExpanded = true, Description = "List of fast foods", ChildItems = [ new() { Text = "Burgers", Description = "List of burgers", ChildItems = [ new() { Text = "Beef Burger" }, new() { Text = "Veggie Burger" }, new() { Text = "Bison Burger" }, new() { Text = "Wild Salmon Burger" }, ] }, new() { Text = "Pizza", ChildItems = [ new() { Text = "Cheese Pizza" }, new() { Text = "Veggie Pizza" }, new() { Text = "Pepperoni Pizza" }, new() { Text = "Meat Pizza" }, ] }, new() { Text = "French Fries" }, ] }, new() { Text = "Fruits", IconName = BitIconName.Health, ChildItems = [ new() { Text = "Apple" }, new() { Text = "Orange" }, new() { Text = "Banana" }, ] }, new() { Text = "Ice Cream" }, new() { Text = "Cookie" }, ]; ``` \n**Accessibility**: ```razor ``` ```csharp private static readonly List a11yNavItems = [ new() { Text = "Navs", IconName = BitIconName.GlobalNavButton, Url = "/components", Description = "Links to the areas of an app", ExpandAriaLabel = "Show the navs", CollapseAriaLabel = "Hide the navs", ChildItems = [ new() { Text = "Nav", Url = "/components/nav" }, new() { Text = "NavBar", Url = "/components/navbar" }, new() { Text = "Breadcrumb", Url = "/components/breadcrumb" }, ] }, new() { Text = "Inputs", IconName = BitIconName.TextField, Description = "Fields that take a value", ChildItems = [ new() { Text = "TextField", Url = "/components/textfield" }, new() { Text = "Dropdown", Url = "/components/dropdown" }, ] }, ]; ``` \n**Cascading parameters**: ```razor ``` ```csharp private readonly BitNavParams[] navParams = [ new() { Mode = BitNavMode.Manual, FitWidth = true, IconOnly = true } ]; private static readonly List colorNavItems = [ new() { Text = "Home", IconName = BitIconName.Home }, new() { Text = "Products", IconName = BitIconName.Product }, new() { Text = "Settings", IconName = BitIconName.Settings }, ]; ``` \n**Badges & Suffix**: ```razor ``` ```csharp private static readonly List badgeNavItems = [ new() { Text = "Inbox", IconName = BitIconName.Inbox, Badge = "12", BadgeAriaLabel = "12 unread" }, new() { Text = "Drafts", IconName = BitIconName.EditMail, Badge = "New" }, new() { Text = "Sent", IconName = BitIconName.Send, Dot = true, BadgeAriaLabel = "failed to send" }, new() { Text = "Archive", IconName = BitIconName.Archive }, ]; private static readonly List suffixNavItems = [ new() { Text = "Inbox", IconName = BitIconName.Inbox, Badge = "12", Data = "Ctrl+I" }, new() { Text = "Drafts", IconName = BitIconName.EditMail, Data = "Ctrl+D" }, new() { Text = "Sent", IconName = BitIconName.Send, Data = "Ctrl+S" }, ]; ``` \n**External Icons**: ```razor ``` ```csharp private static readonly List externalIconNavItems = [ new() { Text = "bit platform", Description = "Nav with external icons (FontAwesome)", ChildItems = [ new() { Text = "Home", Icon = BitIconInfo.Css("fa-solid fa-house"), Url = "https://bitplatform.dev/" }, new() { Text = "Products & Services", ChildItems = [ new() { Text = "BlazorUI", Icon = BitIconInfo.Fa("solid code"), Url = "https://bitplatform.dev/components" }, new() { Text = "Pricing", Icon = BitIconInfo.Css("fa-solid fa-tag"), Url = "https://bitplatform.dev/pricing" }, ] }, new() { Text = "About", Icon = BitIconInfo.Fa("solid circle-info"), Url = "https://bitplatform.dev/about-us" }, new() { Text = "Contact us", Icon = BitIconInfo.Css("fa-solid fa-envelope"), Url = "https://bitplatform.dev/contact-us" }, ], }, new() { Text = "Iconography", Icon = BitIconInfo.Css("fa-solid fa-icons"), Url = "/iconography" }, ]; private static readonly BitIconInfo bootstrapChevronIcon = BitIconInfo.Bi("chevron-right"); private static readonly List bootstrapIconNavItems = [ new() { Text = "bit platform", Description = "Nav with external icons (Bootstrap Icons)", ChildItems = [ new() { Text = "Home", Icon = BitIconInfo.Bi("house-fill"), Url = "https://bitplatform.dev/" }, new() { Text = "BlazorUI", Icon = BitIconInfo.Bi("code-slash"), Url = "https://bitplatform.dev/components" }, new() { Text = "Pricing", Icon = BitIconInfo.Bi("tag-fill"), Url = "https://bitplatform.dev/pricing" }, ], }, new() { Text = "Iconography", Icon = BitIconInfo.Bi("emoji-smile"), Url = "/iconography" }, ]; ``` \n**Style & Class**: ```razor

``` ```csharp private static readonly List styleClassNavItems = [ new() { Text = "Home", IconName = BitIconName.Home, Style = "background: rgba(255,99,71,0.2);" }, new() { Text = "Products", IconName = BitIconName.Product, Class = "custom-item-list" }, new() { Text = "Settings", IconName = BitIconName.Settings }, ]; private static readonly List customStyleNavItems = [ new() { Text = "bit platform", Description = "the bit platform description", ChildItems = [ new() { Text = "Home", IconName = BitIconName.Home, Url = "https://bitplatform.dev/" }, new() { Text = "BlazorUI", IconName = BitIconName.F12DevTools, Url = "https://bitplatform.dev/components" }, ], }, new() { Text = "Iconography", IconName = BitIconName.AppIconDefault, Url = "/iconography" }, new() { IsSeparator = true }, new() { Text = "Contact us", IconName = BitIconName.Contact, Url = "https://bitplatform.dev/contact-us" }, ]; private static readonly List customClassNavItems = [ new() { Text = "bit platform", IconName = BitIconName.Website, Description = "the bit platform description", ChildItems = [ new() { Text = "Home", IconName = BitIconName.Home, Url = "https://bitplatform.dev/" }, new() { Text = "BlazorUI", IconName = BitIconName.F12DevTools, Url = "https://bitplatform.dev/components" }, ], }, new() { Text = "Community", IconName = BitIconName.Group, ChildItems = [new() { Text = "GitHub repo", IconName = BitIconName.GitGraph, Url = "https://github.com/bitfoundation/bitplatform" }] }, ]; private static readonly List colorNavItems = [ new() { Text = "Home", IconName = BitIconName.Home }, new() { Text = "Products", IconName = BitIconName.Product }, new() { Text = "Settings", IconName = BitIconName.Settings }, ]; ``` \n**RTL**: ```razor

``` ```csharp private static readonly List rtlNavItems = [ new() { Text = "پلتفرمِ بیت", Description = "توضیحاتِ پلتفرمِ بیت", ChildItems = [ new() { Text = "خانه", IconName = BitIconName.Home, Url = "https://bitplatform.dev/" }, new() { Text = "محصولات و خدمات", ChildItems = [ new() { Text = "قالب های پروژه", ChildItems = [ new() { Text = "نمونه ی Todo", IconName = BitIconName.ToDoLogoOutline, Url = "https://bitplatform.dev/templates/overview" }, new() { Text = "نمونه ی AdminPanel", IconName = BitIconName.LocalAdmin, Url = "https://bitplatform.dev/templates/overview" }, ] }, new() { Text = "رابط کاربری Blazor", IconName = BitIconName.F12DevTools, Url = "https://blazorui-ai.bitplatform.dev/" }, new() { Text = "راه های هاست ابری", IconName = BitIconName.Cloud, Url = "https://bitplatform.dev/#", IsDisabled = true }, new() { Text = "آکادمی بیت", IconName = BitIconName.LearningTools, Url = "https://bitplatform.dev/#", IsDisabled = true }, ] }, new() { Text = "قیمت", IconName = BitIconName.Money, Url = "https://bitplatform.dev/pricing" }, new() { Text = "درباره ما", IconName = BitIconName.Info, Url = "https://bitplatform.dev/about-us" }, new() { Text = "ارتباط با ما", IconName = BitIconName.Contact, Url = "https://bitplatform.dev/contact-us" }, ], }, new() { Text = "انجمن ها", ChildItems = [ new() { Text = "لینکدین", IconName = BitIconName.LinkedInLogo, Url = "https://www.linkedin.com/company/bitplatformhq" }, new() { Text = "توییتر", IconName = BitIconName.Globe, Url = "https://twitter.com/bitplatformhq" }, new() { Text = "گیتهاب", IconName = BitIconName.GitGraph, Url = "https://github.com/bitfoundation/bitplatform" }, ] }, new() { Text = "شمایل نگاری", IconName = BitIconName.AppIconDefault, Url = "/iconography" }, ]; ```

\n**Basic**: ```razor ``` ```csharp public class Section { public string Text { get; set; } = string.Empty; public string? ImageName { get; set; } public string? Url { get; set; } public bool IsDisabled { get; set; } public bool IsExpanded { get; set; } public bool IsDivider { get; set; } public List

Links { get; set; } = []; public string? Comment { get; set; } public string? Style { get; set; } public string? Class { get; set; } } // Only the renamed members are mapped; the rest keep matching BitNavItem by convention. private static readonly BitNavNameSelectors

customBasicNavItems = [ new() { Text = "bit platform", Comment = "the bit platform description", Links = [ new() { Text = "Home", ImageName = BitIconName.Home, Url = "https://bitplatform.dev/" }, new() { Text = "Products & Services", Links = [ new() { Text = "Project Templates", Links = [ new() { Text = "Todo sample", ImageName = BitIconName.ToDoLogoOutline, Url = "https://bitplatform.dev/templates/overview" }, new() { Text = "AdminPanel sample", ImageName = BitIconName.LocalAdmin, Url = "https://bitplatform.dev/templates/overview" }, ] }, new() { Text = "BlazorUI", ImageName = BitIconName.F12DevTools, Url = "https://bitplatform.dev/components" }, new() { Text = "Cloud hosting solutions", ImageName = BitIconName.Cloud, Url = "https://bitplatform.dev/#", IsDisabled = true }, new() { Text = "Bit academy", ImageName = BitIconName.LearningTools, Url = "https://bitplatform.dev/#", IsDisabled = true }, ] }, new() { Text = "Pricing", ImageName = BitIconName.Money, Url = "https://bitplatform.dev/pricing" }, new() { Text = "About", ImageName = BitIconName.Info, Url = "https://bitplatform.dev/about-us" }, new() { Text = "Contact us", ImageName = BitIconName.Contact, Url = "https://bitplatform.dev/contact-us" }, ], }, new() { Text = "Community", Links = [ new() { Text = "LinkedIn", ImageName = BitIconName.LinkedInLogo, Url = "https://www.linkedin.com/company/bitplatformhq" }, new() { Text = "Twitter", ImageName = BitIconName.Globe, Url = "https://twitter.com/bitplatformhq" }, new() { Text = "GitHub repo", ImageName = BitIconName.GitGraph, Url = "https://github.com/bitfoundation/bitplatform" }, ] }, new() { Text = "Iconography", ImageName = BitIconName.AppIconDefault, Url = "/iconography" }, ]; ``` \n**Grouped & Separator**: ```razor ``` ```csharp public class CarMenu { public string Name { get; set; } = string.Empty; public string? Tooltip { get; set; } public string? PageUrl { get; set; } public string? UrlTarget { get; set; } public string? ExpandedAriaLabel { get; set; } public string? CollapsedAriaLabel { get; set; } public bool IsExpandedParent { get; set; } public string? Comment { get; set; } public List Links { get; set; } = []; } private static readonly BitNavNameSelectors carSelectors = new() { Text = { Name = nameof(CarMenu.Name) }, Url = { Name = nameof(CarMenu.PageUrl) }, Target = { Name = nameof(CarMenu.UrlTarget) }, Title = { Name = nameof(CarMenu.Tooltip) }, IsExpanded = { Name = nameof(CarMenu.IsExpandedParent) }, CollapseAriaLabel = { Name = nameof(CarMenu.CollapsedAriaLabel) }, ExpandAriaLabel = { Name = nameof(CarMenu.ExpandedAriaLabel) }, ChildItems = { Name = nameof(CarMenu.Links) }, Description = { Name = nameof(CarMenu.Comment) }, }; private static readonly List customCarNavItems = [ new() { Name = "Mercedes-Benz", ExpandedAriaLabel = "Mercedes-Benz Expanded", CollapsedAriaLabel = "Mercedes-Benz Collapsed", Tooltip = "Mercedes-Benz Car Models", IsExpandedParent = true, Comment = "Cars manufactured under the brand of Mercedes-Benz", Links = [ new() { Name = "SUVs", Links = [ new() { Name = "GLA", PageUrl = "https://www.mbusa.com/en/vehicles/class/gla/suv", UrlTarget = "_blank" }, new() { Name = "GLB", PageUrl = "https://www.mbusa.com/en/vehicles/class/glb/suv", UrlTarget = "_blank" }, new() { Name = "GLC", PageUrl = "https://www.mbusa.com/en/vehicles/class/glc/suv", UrlTarget = "_blank" }, ] }, new() { Name = "Sedans & Wagons", Links = [ new() { Name = "A Class", PageUrl = "https://www.mbusa.com/en/vehicles/class/a-class/sedan", UrlTarget = "_blank" }, new() { Name = "C Class", PageUrl = "https://www.mbusa.com/en/vehicles/class/c-class/sedan", UrlTarget = "_blank" }, new() { Name = "E Class", PageUrl = "https://www.mbusa.com/en/vehicles/class/e-class/sedan", UrlTarget = "_blank" }, ] }, new() { Name = "Coupes", Links = [ new() { Name = "CLA Coupe", PageUrl = "https://www.mbusa.com/en/vehicles/class/cla/coupe", UrlTarget = "_blank" }, new() { Name = "C Class Coupe", PageUrl = "https://www.mbusa.com/en/vehicles/class/c-class/coupe", UrlTarget = "_blank" }, new() { Name = "E Class Coupe", PageUrl = "https://www.mbusa.com/en/vehicles/class/e-class/coupe", UrlTarget = "_blank" }, ] }, ] }, new() { Name = "Tesla", ExpandedAriaLabel = "Tesla Expanded", CollapsedAriaLabel = "Tesla Collapsed", Tooltip = "Tesla Car Models", Links = [ new() { Name = "Model S", PageUrl = "https://www.tesla.com/models", UrlTarget = "_blank" }, new() { Name = "Model X", PageUrl = "https://www.tesla.com/modelx", UrlTarget = "_blank" }, new() { Name = "Model Y", PageUrl = "https://www.tesla.com/modely", UrlTarget = "_blank" }, ] }, ]; private static readonly List

customSeparatorNavItems = [ new() { Text = "Home", ImageName = BitIconName.Home, Url = "https://bitplatform.dev/" }, new() { Text = "Pricing", ImageName = BitIconName.Money, Url = "https://bitplatform.dev/pricing" }, new() { IsDivider = true }, new() { Text = "LinkedIn", ImageName = BitIconName.LinkedInLogo, Url = "https://www.linkedin.com/company/bitplatformhq" }, new() { Text = "GitHub repo", ImageName = BitIconName.GitGraph, Url = "https://github.com/bitfoundation/bitplatform" }, new() { IsDivider = true }, new() { Text = "Contact us", ImageName = BitIconName.Contact, Url = "https://bitplatform.dev/contact-us" }, ]; // The Section class only renames a handful of the members the nav expects, so only those are mapped and // the rest (Text, Url, IsDisabled, IsExpanded, Style, Class, ...) keep matching BitNavItem by convention. private static readonly BitNavNameSelectors

customSingleExpandNavItems = [ new() { Text = "Fast foods", ImageName = BitIconName.HeartBroken, Links = [ new() { Text = "Burgers", Links = [new() { Text = "Beef Burger" }, new() { Text = "Veggie Burger" }] }, new() { Text = "Pizza", Links = [new() { Text = "Cheese Pizza" }, new() { Text = "Meat Pizza" }] }, new() { Text = "French Fries" }, ] }, new() { Text = "Fruits", ImageName = BitIconName.Health, Links = [new() { Text = "Apple" }, new() { Text = "Orange" }, new() { Text = "Banana" }] }, new() { Text = "Drinks", ImageName = BitIconName.Coffee, Links = [new() { Text = "Water" }, new() { Text = "Tea" }] }, ]; private static readonly List

customNoCollapseNavItems = [ new() { Text = "bit platform", Comment = "the bit platform description", Links = [ new() { Text = "Home", ImageName = BitIconName.Home, Url = "https://bitplatform.dev/" }, new() { Text = "Products & Services", Links = [ new() { Text = "Project Templates", Links = [ new() { Text = "Todo sample", ImageName = BitIconName.ToDoLogoOutline, Url = "https://bitplatform.dev/templates/overview" }, new() { Text = "AdminPanel sample", ImageName = BitIconName.LocalAdmin, Url = "https://bitplatform.dev/templates/overview" }, ] }, new() { Text = "BlazorUI", ImageName = BitIconName.F12DevTools, Url = "https://bitplatform.dev/components" }, new() { Text = "Cloud hosting solutions", ImageName = BitIconName.Cloud, Url = "https://bitplatform.dev/#", IsDisabled = true }, new() { Text = "Bit academy", ImageName = BitIconName.LearningTools, Url = "https://bitplatform.dev/#", IsDisabled = true }, ] }, new() { Text = "Pricing", ImageName = BitIconName.Money, Url = "https://bitplatform.dev/pricing" }, new() { Text = "About", ImageName = BitIconName.Info, Url = "https://bitplatform.dev/about-us" }, new() { Text = "Contact us", ImageName = BitIconName.Contact, Url = "https://bitplatform.dev/contact-us" }, ], }, new() { Text = "Community", Links = [ new() { Text = "LinkedIn", ImageName = BitIconName.LinkedInLogo, Url = "https://www.linkedin.com/company/bitplatformhq" }, new() { Text = "Twitter", ImageName = BitIconName.Globe, Url = "https://twitter.com/bitplatformhq" }, new() { Text = "GitHub repo", ImageName = BitIconName.GitGraph, Url = "https://github.com/bitfoundation/bitplatform" }, ] }, new() { Text = "Iconography", ImageName = BitIconName.AppIconDefault, Url = "/iconography" }, ]; // The Section class only renames a handful of the members the nav expects, so only those are mapped and // the rest (Text, Url, IsDisabled, IsExpanded, Style, Class, ...) keep matching BitNavItem by convention. private static readonly BitNavNameSelectors

@item.Name

@item.Text @if (item.Count is not null) { }

@item.Text custom

``` ```csharp public class Section { // ... the members above public int? Count { get; set; } } // The template above reads the count straight off the item, so it needs no selector. private static readonly List

customMailNavItems = [ new() { Text = "Inbox", ImageName = BitIconName.Inbox, Count = 12 }, new() { Text = "Drafts", ImageName = BitIconName.EditMail, Count = 2 }, new() { Text = "Sent", ImageName = BitIconName.Send }, new() { Text = "Archive", ImageName = BitIconName.Archive }, ]; private static readonly List

customColorNavItems = [ new() { Text = "Home", ImageName = BitIconName.Home }, new() { Text = "Products", ImageName = BitIconName.Product }, new() { Text = "Settings", ImageName = BitIconName.Settings }, ]; private static readonly List customCarNavItems = [ new() { Name = "Mercedes-Benz", ExpandedAriaLabel = "Mercedes-Benz Expanded", CollapsedAriaLabel = "Mercedes-Benz Collapsed", Tooltip = "Mercedes-Benz Car Models", IsExpandedParent = true, Comment = "Cars manufactured under the brand of Mercedes-Benz", Links = [ new() { Name = "SUVs", Links = [ new() { Name = "GLA", PageUrl = "https://www.mbusa.com/en/vehicles/class/gla/suv", UrlTarget = "_blank" }, new() { Name = "GLB", PageUrl = "https://www.mbusa.com/en/vehicles/class/glb/suv", UrlTarget = "_blank" }, new() { Name = "GLC", PageUrl = "https://www.mbusa.com/en/vehicles/class/glc/suv", UrlTarget = "_blank" }, ] }, new() { Name = "Sedans & Wagons", Links = [ new() { Name = "A Class", PageUrl = "https://www.mbusa.com/en/vehicles/class/a-class/sedan", UrlTarget = "_blank" }, new() { Name = "C Class", PageUrl = "https://www.mbusa.com/en/vehicles/class/c-class/sedan", UrlTarget = "_blank" }, new() { Name = "E Class", PageUrl = "https://www.mbusa.com/en/vehicles/class/e-class/sedan", UrlTarget = "_blank" }, ] }, new() { Name = "Coupes", Links = [ new() { Name = "CLA Coupe", PageUrl = "https://www.mbusa.com/en/vehicles/class/cla/coupe", UrlTarget = "_blank" }, new() { Name = "C Class Coupe", PageUrl = "https://www.mbusa.com/en/vehicles/class/c-class/coupe", UrlTarget = "_blank" }, new() { Name = "E Class Coupe", PageUrl = "https://www.mbusa.com/en/vehicles/class/e-class/coupe", UrlTarget = "_blank" }, ] }, ] }, new() { Name = "Tesla", ExpandedAriaLabel = "Tesla Expanded", CollapsedAriaLabel = "Tesla Collapsed", Tooltip = "Tesla Car Models", Links = [ new() { Name = "Model S", PageUrl = "https://www.tesla.com/models", UrlTarget = "_blank" }, new() { Name = "Model X", PageUrl = "https://www.tesla.com/modelx", UrlTarget = "_blank" }, new() { Name = "Model Y", PageUrl = "https://www.tesla.com/modely", UrlTarget = "_blank" }, ] }, ]; private static readonly BitNavNameSelectors carSelectors = new() { Text = { Name = nameof(CarMenu.Name) }, Url = { Name = nameof(CarMenu.PageUrl) }, Target = { Name = nameof(CarMenu.UrlTarget) }, Title = { Name = nameof(CarMenu.Tooltip) }, IsExpanded = { Name = nameof(CarMenu.IsExpandedParent) }, CollapseAriaLabel = { Name = nameof(CarMenu.CollapsedAriaLabel) }, ExpandAriaLabel = { Name = nameof(CarMenu.ExpandedAriaLabel) }, ChildItems = { Name = nameof(CarMenu.Links) }, Description = { Name = nameof(CarMenu.Comment) }, }; // The Section class only renames a handful of the members the nav expects, so only those are mapped and // the rest (Text, Url, IsDisabled, IsExpanded, Style, Class, ...) keep matching BitNavItem by convention. private static readonly BitNavNameSelectors

a11ySelectors = new() { IconName = { Name = nameof(Section.ImageName) }, ChildItems = { Name = nameof(Section.Links) }, Description = { Name = nameof(Section.Comment) }, ExpandAriaLabel = { Name = nameof(Section.OpenLabel) }, CollapseAriaLabel = { Name = nameof(Section.CloseLabel) }, }; private static readonly List

customA11yNavItems = [ new() { Text = "Navs", ImageName = BitIconName.GlobalNavButton, Url = "/components", Comment = "Links to the areas of an app", OpenLabel = "Show the navs", CloseLabel = "Hide the navs", Links = [ new() { Text = "Nav", Url = "/components/nav" }, new() { Text = "NavBar", Url = "/components/navbar" }, new() { Text = "Breadcrumb", Url = "/components/breadcrumb" }, ] }, new() { Text = "Inputs", ImageName = BitIconName.TextField, Comment = "Fields that take a value", Links = [ new() { Text = "TextField", Url = "/components/textfield" }, new() { Text = "Dropdown", Url = "/components/dropdown" }, ] }, ]; ``` \n**Cascading parameters**: ```razor ``` ```csharp private readonly BitNavParams[] navParams = [ new() { Mode = BitNavMode.Manual, FitWidth = true, IconOnly = true } ]; private static readonly List

customColorNavItems = [ new() { Text = "Home", ImageName = BitIconName.Home }, new() { Text = "Products", ImageName = BitIconName.Product }, new() { Text = "Settings", ImageName = BitIconName.Settings }, ]; // The Section class only renames a handful of the members the nav expects, so only those are mapped and // the rest (Text, Url, IsDisabled, IsExpanded, Style, Class, ...) keep matching BitNavItem by convention. private static readonly BitNavNameSelectors

sectionSelectors = new() { IconName = { Name = nameof(Section.ImageName) }, ChildItems = { Name = nameof(Section.Links) }, Description = { Name = nameof(Section.Comment) }, IsSeparator = { Name = nameof(Section.IsDivider) }, }; ``` \n**Badges & Suffix**: ```razor ``` ```csharp public class Section { public string Text { get; set; } = string.Empty; public string? ImageName { get; set; } public int? Count { get; set; } public string? Status { get; set; } public string? StatusLabel { get; set; } public bool NeedsAttention { get; set; } public string? Shortcut { get; set; } } // The badge text is put together from the count of a section or its status, and the rest of the badge is // read off members of the section's own names. private static readonly BitNavNameSelectors

badgeSelectors = new() { IconName = { Name = nameof(Section.ImageName) }, Badge = { Selector = s => s.Count?.ToString() ?? s.Status }, BadgeAriaLabel = { Name = nameof(Section.StatusLabel) }, Dot = { Name = nameof(Section.NeedsAttention) }, }; private static readonly List

customBadgeNavItems = [ new() { Text = "Inbox", ImageName = BitIconName.Inbox, Count = 12, StatusLabel = "12 unread" }, new() { Text = "Drafts", ImageName = BitIconName.EditMail, Status = "New" }, new() { Text = "Sent", ImageName = BitIconName.Send, NeedsAttention = true, StatusLabel = "failed to send" }, new() { Text = "Archive", ImageName = BitIconName.Archive }, ]; private static readonly List

customSuffixNavItems = [ new() { Text = "Inbox", ImageName = BitIconName.Inbox, Count = 12, Shortcut = "Ctrl+I" }, new() { Text = "Drafts", ImageName = BitIconName.EditMail, Shortcut = "Ctrl+D" }, new() { Text = "Sent", ImageName = BitIconName.Send, Shortcut = "Ctrl+S" }, ]; ```