Nav - bit BlazorUI

**Basic**: 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" }, ]; **FitWidth**: 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" }, ]; **Grouped**: 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" }, ] }, ]; **Manual Mode**:

Basic

Two-Way Bind

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 readonly List FoodMenuDropdownItems = new() { 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 = "Aplle", Value = "Aplle", }, new() { Text = "Orange", Value = "Orange", }, new() { Text = "Benana", Value = "Benana", }, new() { Text = "Ice Cream", Value = "Ice Cream", }, new() { Text = "Cookie", Value = "Cookie", }, }; private static List Flatten(IList e) => e.SelectMany(c => Flatten(c.Items)).Concat(e).ToList(); private BitNavItem SelectedItemNav = foodNavItems[0].Items[2]; private string SelectedItemText = foodNavItems[0].Items[2].Text; **IconOnly**: private bool iconOnly; private static readonly List iconOnlyNavItems = [ new() { Text = "Home", IconName = BitIconName.Home }, new() { Text = "AdminPanel sample", IconName = BitIconName.LocalAdmin, ChildItems = [ new() { Text = "Dashboard", IconName = BitIconName.ViewDashboard }, new() { Text = "Categories", IconName = BitIconName.BuildQueue }, new() { Text = "Products", IconName = BitIconName.Product }, ] }, new() { Text = "Todo sample", IconName = BitIconName.ToDoLogoOutline}, new() { Text = "BlazorUI", IconName = BitIconName.F12DevTools }, new() { Text = "Bit academy", IconName = BitIconName.LearningTools, IsEnabled = false }, new() { Text = "Contact us", IconName = BitIconName.Contact }, ]; **Custom Templates**:

Header Template (in Grouped mode)

@item.Text

Item Template

@item.Text

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 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" }, ]; **Events**: Clicked Item: @ClickedItem?.Text Selected Item: @SelectedItem?.Text Toggled Item: @(ToggledItem is null ? "N/A" : $"{ToggledItem.Text} ({(ToggledItem.IsExpanded ? "Expanded" : "Collapsed")})") 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 BitNavItem ClickedItem; private BitNavItem SelectedItem; private BitNavItem ToggledItem; **AllExpanded & NoCollapse**: 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/#", 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" }, ]; **External Icons**: 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" }, ]; **Custom Styles**: 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 = "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" }, ]; **RTL**: private static readonly List RtlbasicNavItems = [ 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" }, ];

**Basic**: 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 string? Comment { get; set; } public List

Links { get; set; } = []; } 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" }, ]; **FitWidth**: 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 string? Comment { get; set; } public List

Links { get; set; } = []; } 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" }, ]; **Grouped**: 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 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" }, ] }, ]; **Manual Mode**: public class FoodMenu { public string Name { get; set; } = string.Empty; public string Image { get; set; } public bool IsExpanded { get; set; } public string? Comment { get; set; } public List Childs { get; set; } = []; } private static readonly List customCarNavItems = [ new() { Name = "Fast foods", Image = BitIconName.HeartBroken, IsExpanded = true, Comment = "List of fast foods", Childs = [ new() { Name = "Burgers", Comment = "List of burgers", Childs = [ new() { Name = "Beef Burger" }, new() { Name = "Veggie Burger" }, new() { Name = "Bison Burger" }, new() { Name = "Wild Salmon Burger" }, ] }, new() { Name = "Pizza", Childs = [ new() { Name = "Cheese Pizza" }, new() { Name = "Veggie Pizza" }, new() { Name = "Pepperoni Pizza" }, new() { Name = "Meat Pizza" }, ] }, new() { Name = "French Fries" }, ] }, new() { Name = "Fruits", Image = BitIconName.Health, Childs = [ new() { Name = "Apple" }, new() { Name = "Orange" }, new() { Name = "Banana" }, ] }, new() { Name = "Ice Cream" }, new() { Name = "Cookie" }, ]; 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" }, ]; private static List Flatten(IList e) => e.SelectMany(c => Flatten(c.Childs)).Concat(e).ToList(); private FoodMenu CustomSelectedFood = customCarNavItems[0].Childs[2]; private string CustomSelectedFoodName = customCarNavItems[0].Childs[2].Name; **IconOnly**: private bool iconOnly; 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 string? Comment { get; set; } public List

Links { get; set; } = []; } private static readonly List

customIconOnlyNavItems = [ new() { Text = "Home", ImageName = BitIconName.Home }, new() { Text = "AdminPanel sample", ImageName = BitIconName.LocalAdmin, Links = [ new() { Text = "Dashboard", ImageName = BitIconName.ViewDashboard }, new() { Text = "Categories", ImageName = BitIconName.BuildQueue }, new() { Text = "Products", ImageName = BitIconName.Product }, ] }, new() { Text = "Todo sample", ImageName = BitIconName.ToDoLogoOutline}, new() { Text = "BlazorUI", ImageName = BitIconName.F12DevTools }, new() { Text = "Bit academy", ImageName = BitIconName.LearningTools, IsEnabled = false }, new() { Text = "Contact us", ImageName = BitIconName.Contact }, ]; **Custom Templates**:

@item.Name

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; } = []; } public class FoodMenu { public string Name { get; set; } = string.Empty; public string Image { get; set; } public bool IsExpanded { get; set; } public string? Comment { get; set; } public List Childs { get; set; } = []; } 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 customFoodNavItems = [ new() { Name = "Fast foods", Image = BitIconName.HeartBroken, IsExpanded = true, Comment = "List of fast foods", Childs = [ new() { Name = "Burgers", Comment = "List of burgers", Childs = [ new() { Name = "Beef Burger" }, new() { Name = "Veggie Burger" }, new() { Name = "Bison Burger" }, new() { Name = "Wild Salmon Burger" }, ] }, new() { Name = "Pizza", Childs = [ new() { Name = "Cheese Pizza" }, new() { Name = "Veggie Pizza" }, new() { Name = "Pepperoni Pizza" }, new() { Name = "Meat Pizza" }, ] }, new() { Name = "French Fries" }, ] }, new() { Name = "Fruits", Image = BitIconName.Health, Childs = [ new() { Name = "Apple" }, new() { Name = "Orange" }, new() { Name = "Banana" }, ] }, new() { Name = "Ice Cream" }, new() { Name = "Cookie" }, ]; **Events**:

Clicked Item: @CustomClickedItem?.Name

Selected Item: @CustomSelectedItem?.Name

Toggled Item: @(CustomToggledItem is null ? "N/A" : $"{CustomToggledItem.Name} ({(CustomToggledItem.IsExpanded ? "Expanded" : "Collapsed")})")

public class FoodMenu { public string Name { get; set; } = string.Empty; public string Image { get; set; } public bool IsExpanded { get; set; } public string? Comment { get; set; } public List Childs { get; set; } = []; } private static readonly List customCarNavItems = [ new() { Name = "Fast foods", Image = BitIconName.HeartBroken, IsExpanded = true, Comment = "List of fast foods", Childs = [ new() { Name = "Burgers", Comment = "List of burgers", Childs = [ new() { Name = "Beef Burger" }, new() { Name = "Veggie Burger" }, new() { Name = "Bison Burger" }, new() { Name = "Wild Salmon Burger" }, ] }, new() { Name = "Pizza", Childs = [ new() { Name = "Cheese Pizza" }, new() { Name = "Veggie Pizza" }, new() { Name = "Pepperoni Pizza" }, new() { Name = "Meat Pizza" }, ] }, new() { Name = "French Fries" }, ] }, new() { Name = "Fruits", Image = BitIconName.Health, Childs = [ new() { Name = "Apple" }, new() { Name = "Orange" }, new() { Name = "Banana" }, ] }, new() { Name = "Ice Cream" }, new() { Name = "Cookie" }, ]; private FoodMenu CustomClickedItem; private FoodMenu CustomSelectedItem; private FoodMenu CustomToggledItem; **AllExpanded & NoCollapse**: 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 string? Comment { get; set; } public List

Links { get; set; } = []; } 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" }, ]; **External Icons**: 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 string? Comment { get; set; } public List

Links { get; set; } = []; } private static readonly List

customExternalIconNavItems = [ new() { Text = "bit platform", Comment = "Nav with external icons (FontAwesome)", Links = [ new() { Text = "Home", ImageName = BitIconInfo.Css("fa-solid fa-house"), Url = "https://bitplatform.dev/" }, new() { Text = "Products & Services", Links = [ new() { Text = "BlazorUI", ImageName = BitIconInfo.Fa("solid code"), Url = "https://bitplatform.dev/components" }, new() { Text = "Pricing", ImageName = BitIconInfo.Css("fa-solid fa-tag"), Url = "https://bitplatform.dev/pricing" }, ] }, new() { Text = "About", ImageName = BitIconInfo.Fa("solid circle-info"), Url = "https://bitplatform.dev/about-us" }, new() { Text = "Contact us", ImageName = BitIconInfo.Css("fa-solid fa-envelope"), Url = "https://bitplatform.dev/contact-us" }, ], }, new() { Text = "Iconography", ImageName = BitIconInfo.Css("fa-solid fa-icons"), Url = "/iconography" }, ]; **Custom Styles**: 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 string? Comment { get; set; } public List

Links { get; set; } = []; } private static readonly List

customCustomStyleNavItems = [ 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" }, ]; **RTL**: 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 string? Comment { get; set; } public List

Links { get; set; } = []; } private static readonly List

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

**Basic**: **FitWidth**: **Grouped**: < BitNav TItem="BitNavOption" RenderType="BitNavRenderType.Grouped"> **Manual Mode**: private string SelectedOptionKey; 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" }, ]; **IconOnly**: private bool iconOnly; **Custom Templates**:

@item.Text

@option.Text

**Events**: Clicked Option: @ClickedOption?.Text Selected Option: @SelectedOption?.Text Toggled Option: @(ToggledOption is null ? "N/A" : $"{ToggledOption.Text} ({(ToggledOption.IsExpanded ? "Expanded" : "Collapsed")})") private BitNavOption ClickedOption; private BitNavOption SelectedOption; private BitNavOption ToggledOption; **AllExpanded & NoCollapse**: **External Icons**: **Custom Styles**: **RTL**: