\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/#", IsEnabled = false }, new() { Text = "Bit academy", IconName = BitIconName.LearningTools, Url = "https://bitplatform.dev/#", IsEnabled = false }, ] }, 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**: ```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" }, ] }, ]; ``` \n**Separator**: ```razor ``` ```csharp 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**SingleExpand**: ```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" }] }, ]; ``` \n**Custom Templates**: ```razor

@item.Text

@item.Text custom

``` ```csharp private static readonly List colorNavItems = [ new() { Text = "Home", IconName = BitIconName.Home }, new() { Text = "Products", IconName = BitIconName.Product }, new() { Text = "Settings", IconName = BitIconName.Settings }, ]; ``` \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!; ``` \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" }] }, ]; ``` \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/#", IsEnabled = false }, new() { Text = "آکادمی بیت", IconName = BitIconName.LearningTools, Url = "https://bitplatform.dev/#", IsEnabled = false }, ] }, 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 IsEnabled { get; set; } = true; 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

sectionSelectors = new() { IconName = { Name = nameof(Section.ImageName) }, ChildItems = { Name = nameof(Section.Links) }, Description = { Name = nameof(Section.Comment) }, IsSeparator = { Name = nameof(Section.IsDivider) }, }; private static readonly List

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/#", IsEnabled = false }, new() { Text = "Bit academy", ImageName = BitIconName.LearningTools, Url = "https://bitplatform.dev/#", IsEnabled = false }, ] }, 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**Separator**: ```razor ``` ```csharp 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" }, ]; ``` \n**SingleExpand**: ```razor ``` ```csharp private static readonly List

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" }] }, ]; ``` \n**Custom Templates**: ```razor

@item.Name

@item.Text custom

``` ```csharp private static readonly List

customColorNavItems = [ new() { Text = "Home", ImageName = BitIconName.Home }, new() { Text = "Products", ImageName = BitIconName.Product }, new() { Text = "Settings", ImageName = BitIconName.Settings }, ]; ```