\n**Basic**: ```razor ``` ```csharp private static readonly List basicNavBarItems = [ new() { Text = "Home", IconName = BitIconName.Home }, new() { Text = "Products", IconName = BitIconName.ProductVariant }, new() { Text = "Academy", IconName = BitIconName.LearningTools }, new() { Text = "Profile", IconName = BitIconName.Contact }, ]; ``` \n**Scrollable**: ```razor Select the last item Selected item: @scrollableSelectedItem?.Text ``` ```csharp private static readonly List scrollableNavBarItems = [ new() { Text = "Home", IconName = BitIconName.Home }, new() { Text = "Products", IconName = BitIconName.ProductVariant }, new() { Text = "Academy", IconName = BitIconName.LearningTools }, new() { Text = "Inbox", IconName = BitIconName.Mail }, new() { Text = "Alerts", IconName = BitIconName.Ringer }, new() { Text = "Favorites", IconName = BitIconName.Heart }, new() { Text = "Reports", IconName = BitIconName.ReportDocument }, new() { Text = "Settings", IconName = BitIconName.Settings }, new() { Text = "Support", IconName = BitIconName.Help }, new() { Text = "Calendar", IconName = BitIconName.Calendar }, new() { Text = "Chat", IconName = BitIconName.Chat }, new() { Text = "People", IconName = BitIconName.People }, new() { Text = "News", IconName = BitIconName.News }, new() { Text = "Photos", IconName = BitIconName.Photo2 }, new() { Text = "Videos", IconName = BitIconName.Video }, new() { Text = "Music", IconName = BitIconName.MusicNote }, new() { Text = "Documents", IconName = BitIconName.Document }, new() { Text = "Cloud", IconName = BitIconName.Cloud }, new() { Text = "Maps", IconName = BitIconName.MapPin }, new() { Text = "Profile", IconName = BitIconName.Contact }, ]; private BitNavBarItem? scrollableSelectedItem; ``` \n**Header & Footer**: ```razor ``` ```csharp private static readonly List basicNavBarItems = [ new() { Text = "Home", IconName = BitIconName.Home }, new() { Text = "Products", IconName = BitIconName.ProductVariant }, new() { Text = "Academy", IconName = BitIconName.LearningTools }, new() { Text = "Profile", IconName = BitIconName.Contact }, ]; ``` \n**Templates**: ```razor @item.Text ``` ```csharp private static readonly List basicNavBarItems = [ new() { Text = "Home", IconName = BitIconName.Home }, new() { Text = "Products", IconName = BitIconName.ProductVariant }, new() { Text = "Academy", IconName = BitIconName.LearningTools }, new() { Text = "Profile", IconName = BitIconName.Contact }, ]; private static readonly List templateNavBarItems = [ new() { Text = "Home", IconName = BitIconName.Home }, new() { Text = "Products", Template = (item) => @

@item.Text🎁

}, new() { Text = "Academy", IconName = BitIconName.LearningTools }, new() { Text = "Profile", IconName = BitIconName.Contact }, ]; private static readonly List replacedTemplateNavBarItems = [ new() { Text = "Home", IconName = BitIconName.Home }, new() { Text = "Search", IconName = BitIconName.Search }, new() { Text = "New", TemplateRenderMode = BitNavItemTemplateRenderMode.Replace, Template = (item) => @ }, new() { Text = "Alerts", IconName = BitIconName.Ringer }, new() { Text = "Profile", IconName = BitIconName.Contact }, ]; ``` \n**Events**: ```razor

Clicked item: @eventsClickedItem?.Text (@clickCount clicks)

Selected item: @eventsSelectedItem?.Text (@selectCount selections)

``` ```csharp private static readonly List basicNavBarItems = [ new() { Text = "Home", IconName = BitIconName.Home }, new() { Text = "Products", IconName = BitIconName.ProductVariant }, new() { Text = "Academy", IconName = BitIconName.LearningTools }, new() { Text = "Profile", IconName = BitIconName.Contact }, ]; private bool reselectable; private int clickCount; private int selectCount; private BitNavBarItem? eventsClickedItem; private BitNavBarItem? eventsSelectedItem; ``` \n**Dynamic Items**: ```razor Add item Remove item Reverse items Selected item: @dynamicSelectedItem?.Text ``` ```csharp private int dynamicItemsCount = 3; private BitNavBarItem? dynamicSelectedItem; private readonly List dynamicNavBarItems = [ new() { Text = "Home", IconName = BitIconName.Home }, new() { Text = "Products", IconName = BitIconName.ProductVariant }, new() { Text = "Profile", IconName = BitIconName.Contact }, ]; private void AddDynamicItem() { dynamicItemsCount++; dynamicNavBarItems.Add(new() { Text = $"Item {dynamicItemsCount}", IconName = BitIconName.Tag }); } private void RemoveDynamicItem() { if (dynamicNavBarItems.Count == 0) return; dynamicNavBarItems.RemoveAt(dynamicNavBarItems.Count - 1); } private void ReverseDynamicItems() => dynamicNavBarItems.Reverse(); ``` \n**External Icons**: ```razor ``` ```csharp private static readonly List externalIconItems = [ new() { Text = "Home", Icon = "fa-solid fa-house" }, new() { Text = "Products", Icon = BitIconInfo.Css("fa-solid fa-box") }, new() { Text = "Academy", Icon = BitIconInfo.Fa("solid graduation-cap") }, new() { Text = "Profile", Icon = BitIconInfo.Fa("solid user") }, ]; ``` \n**Style & Class**: ```razor ``` ```csharp private static readonly List basicNavBarItems = [ new() { Text = "Home", IconName = BitIconName.Home }, new() { Text = "Products", IconName = BitIconName.ProductVariant }, new() { Text = "Academy", IconName = BitIconName.LearningTools }, new() { Text = "Profile", IconName = BitIconName.Contact }, ]; private static readonly List styleClassItems = [ new() { Text = "Home", IconName = BitIconName.Home }, new() { Text = "Products", IconName = BitIconName.ProductVariant, Class = "custom-item" }, new() { Text = "Academy", IconName = BitIconName.LearningTools, Style = "color: #b6ff00;font-weight: 600;" }, new() { Text = "Profile", IconName = BitIconName.Contact }, ]; private static readonly List badgeNavBarItems = [ new() { Text = "Home", IconName = BitIconName.Home }, new() { Text = "Inbox", IconName = BitIconName.Mail, Badge = "12" }, new() { Text = "Alerts", IconName = BitIconName.Ringer, Badge = "99+", BadgeAriaLabel = "more than 99 unread alerts" }, new() { Text = "Profile", IconName = BitIconName.Contact, Dot = true, BadgeAriaLabel = "needs attention" }, ]; ```

\n**Basic**: ```razor ``` ```csharp public class MenuItem { public string? Title { get; set; } public string? ImageName { get; set; } public BitIconInfo? Image { get; set; } public RenderFragment? Fragment { get; set; } public string? CssClass { get; set; } public string? Style { get; set; } public bool Disabled { get; set; } public string? Link { get; set; } public IEnumerable? ExtraLinks { get; set; } public BitNavMatch? Matching { get; set; } public BitNavItemTemplateRenderMode FragmentRenderMode { get; set; } public string? Counter { get; set; } public string? CounterLabel { get; set; } public bool Marker { get; set; } public string? SelectedImageName { get; set; } public BitIconInfo? SelectedImage { get; set; } } private static readonly List basicNavBarCustoms = [ new() { Title = "Home", ImageName = BitIconName.Home }, new() { Title = "Products", ImageName = BitIconName.ProductVariant }, new() { Title = "Academy", ImageName = BitIconName.LearningTools }, new() { Title = "Profile", ImageName = BitIconName.Contact }, ]; ``` \n**Scrollable**: ```razor Select the last item Selected item: @scrollableSelectedCustom?.Title ``` ```csharp private static readonly List scrollableNavBarCustoms = [ new() { Title = "Home", ImageName = BitIconName.Home }, new() { Title = "Products", ImageName = BitIconName.ProductVariant }, new() { Title = "Academy", ImageName = BitIconName.LearningTools }, new() { Title = "Inbox", ImageName = BitIconName.Mail }, new() { Title = "Alerts", ImageName = BitIconName.Ringer }, new() { Title = "Favorites", ImageName = BitIconName.Heart }, new() { Title = "Reports", ImageName = BitIconName.ReportDocument }, new() { Title = "Settings", ImageName = BitIconName.Settings }, new() { Title = "Support", ImageName = BitIconName.Help }, new() { Title = "Calendar", ImageName = BitIconName.Calendar }, new() { Title = "Chat", ImageName = BitIconName.Chat }, new() { Title = "People", ImageName = BitIconName.People }, new() { Title = "News", ImageName = BitIconName.News }, new() { Title = "Photos", ImageName = BitIconName.Photo2 }, new() { Title = "Videos", ImageName = BitIconName.Video }, new() { Title = "Music", ImageName = BitIconName.MusicNote }, new() { Title = "Documents", ImageName = BitIconName.Document }, new() { Title = "Cloud", ImageName = BitIconName.Cloud }, new() { Title = "Maps", ImageName = BitIconName.MapPin }, new() { Title = "Profile", ImageName = BitIconName.Contact }, ]; private MenuItem? scrollableSelectedCustom; ``` \n**Header & Footer**: ```razor ``` ```csharp private static readonly List basicNavBarCustoms = [ new() { Title = "Home", ImageName = BitIconName.Home }, new() { Title = "Products", ImageName = BitIconName.ProductVariant }, new() { Title = "Academy", ImageName = BitIconName.LearningTools }, new() { Title = "Profile", ImageName = BitIconName.Contact }, ]; ``` \n**Templates**: ```razor @custom.Title ``` ```csharp private static readonly List basicNavBarCustoms = [ new() { Title = "Home", ImageName = BitIconName.Home }, new() { Title = "Products", ImageName = BitIconName.ProductVariant }, new() { Title = "Academy", ImageName = BitIconName.LearningTools }, new() { Title = "Profile", ImageName = BitIconName.Contact }, ]; private static readonly List templateNavBarCustoms = [ new() { Title = "Home", ImageName = BitIconName.Home }, new() { Title = "Products", Fragment = (item) => @

@item.Title🎁

}, new() { Title = "Academy", ImageName = BitIconName.LearningTools }, new() { Title = "Profile", ImageName = BitIconName.Contact }, ]; private static readonly List replacedTemplateNavBarCustoms = [ new() { Title = "Home", ImageName = BitIconName.Home }, new() { Title = "Search", ImageName = BitIconName.Search }, new() { Title = "New", FragmentRenderMode = BitNavItemTemplateRenderMode.Replace, Fragment = (item) => @ }, new() { Title = "Alerts", ImageName = BitIconName.Ringer }, new() { Title = "Profile", ImageName = BitIconName.Contact }, ]; ``` \n**Events**: ```razor

Clicked item: @eventsClickedItem?.Title (@clickCount clicks)

Selected item: @eventsSelectedItem?.Title (@selectCount selections)

``` ```csharp private static readonly List basicNavBarCustoms = [ new() { Title = "Home", ImageName = BitIconName.Home }, new() { Title = "Products", ImageName = BitIconName.ProductVariant }, new() { Title = "Academy", ImageName = BitIconName.LearningTools }, new() { Title = "Profile", ImageName = BitIconName.Contact }, ]; private bool reselectable; private int clickCount; private int selectCount; private MenuItem? eventsClickedItem; private MenuItem? eventsSelectedItem; ``` \n**Dynamic Items**: ```razor Add item Remove item Reverse items Selected item: @dynamicSelectedCustom?.Title ``` ```csharp private int dynamicCustomsCount = 3; private MenuItem? dynamicSelectedCustom; private readonly List dynamicNavBarCustoms = [ new() { Title = "Home", ImageName = BitIconName.Home }, new() { Title = "Products", ImageName = BitIconName.ProductVariant }, new() { Title = "Profile", ImageName = BitIconName.Contact }, ]; private void AddDynamicCustom() { dynamicCustomsCount++; dynamicNavBarCustoms.Add(new() { Title = $"Item {dynamicCustomsCount}", ImageName = BitIconName.Tag }); } private void RemoveDynamicCustom() { if (dynamicNavBarCustoms.Count == 0) return; dynamicNavBarCustoms.RemoveAt(dynamicNavBarCustoms.Count - 1); } private void ReverseDynamicCustoms() => dynamicNavBarCustoms.Reverse(); ``` \n**External Icons**: ```razor ``` ```csharp private static readonly List externalIconCustoms = [ new() { Title = "Home", Image = "fa-solid fa-house" }, new() { Title = "Products", Image = BitIconInfo.Css("fa-solid fa-box") }, new() { Title = "Academy", Image = BitIconInfo.Fa("solid graduation-cap") }, new() { Title = "Profile", Image = BitIconInfo.Fa("solid user") }, ]; ``` \n**Style & Class**: ```razor ``` ```csharp private static readonly List basicNavBarCustoms = [ new() { Title = "Home", ImageName = BitIconName.Home }, new() { Title = "Products", ImageName = BitIconName.ProductVariant }, new() { Title = "Academy", ImageName = BitIconName.LearningTools }, new() { Title = "Profile", ImageName = BitIconName.Contact }, ]; private static readonly List basicNavBarCustomsClassStyle = [ new() { Title = "Home", ImageName = BitIconName.Home }, new() { Title = "Products", ImageName = BitIconName.ProductVariant, CssClass = "custom-item" }, new() { Title = "Academy", ImageName = BitIconName.LearningTools, Style = "color: #b6ff00;font-weight: 600;" }, new() { Title = "Profile", ImageName = BitIconName.Contact }, ]; private static readonly List badgeNavBarCustoms = [ new() { Title = "Home", ImageName = BitIconName.Home }, new() { Title = "Inbox", ImageName = BitIconName.Mail, Counter = "12" }, new() { Title = "Alerts", ImageName = BitIconName.Ringer, Counter = "99+", CounterLabel = "more than 99 unread alerts" }, new() { Title = "Profile", ImageName = BitIconName.Contact, Marker = true, CounterLabel = "needs attention" }, ]; ```

\n**Basic**: ```razor ``` \n**Scrollable**: ```razor Select the last item Selected key: @scrollableSelectedKey ``` ```csharp private string? scrollableSelectedKey; ``` \n**Header & Footer**: ```razor ``` \n**Templates**: ```razor @option.Text ``` \n**Events**: ```razor

Clicked item: @eventsClickedOption?.Text (@clickCount clicks)

Selected item: @eventsSelectedOption?.Text (@selectCount selections)

``` ```csharp private bool reselectable; private int clickCount; private int selectCount; private BitNavBarOption? eventsClickedOption; private BitNavBarOption? eventsSelectedOption; ``` \n**Dynamic Items**: ```razor Add item Remove item Reverse items @foreach (var option in dynamicOptions) { } Selected item: @dynamicSelectedOption?.Text ``` ```csharp private bool dynamicAutoReorder = true; private int dynamicOptionsCount = 3; private BitNavBarOption? dynamicSelectedOption; private readonly List dynamicOptions = [ new("Home", BitIconName.Home), new("Products", BitIconName.ProductVariant), new("Profile", BitIconName.Contact), ]; private void AddDynamicOption() { dynamicOptionsCount++; dynamicOptions.Add(new($"Item {dynamicOptionsCount}", BitIconName.Tag)); } private void RemoveDynamicOption() { if (dynamicOptions.Count == 0) return; dynamicOptions.RemoveAt(dynamicOptions.Count - 1); } private void ReverseDynamicOptions() => dynamicOptions.Reverse(); private record DynamicOption(string Text, string IconName); ``` \n**External Icons**: ```razor ``` \n**Style & Class**: ```razor ```