**Nav** Tree,TreeView A navigation pane (Nav) provides links to the main areas of an app or site. This component can also be used as a TreeView to show parent-child data in a tree.
**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**:
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**:
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
Two-Way Bind
Header Template (in Grouped mode)
Item Template