\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 = "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 Selected item: @eventsSelectedItem?.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 BitNavBarItem? eventsClickedItem; private BitNavBarItem? eventsSelectedItem; ``` \n**Binding**: ```razor Selected item: @selectedItem.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 IEnumerable> choiceGroupItems = basicNavBarItems.Select(i => new BitChoiceGroupItem() { Id = i.Text, Text = i.Text, IsEnabled = i.IsEnabled, Value = i }); private BitNavBarItem selectedItem = basicNavBarItems[0]; private BitNavBarItem twoWaySelectedItem = basicNavBarItems[0]; ``` \n**Reselectable**: ```razor Item click count: @countClick ``` ```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 int countClick; private bool reselectable = true; ``` \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 = "Profile", ImageName = BitIconName.Contact }, ]; private MenuItem? scrollableSelectedCustom; ``` \n**Header & Footer**: ```razor ``` ```csharp public class MenuItem { public string? Title { get; set; } public string? ImageName { 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**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 Selected item: @eventsSelectedItem?.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 MenuItem? eventsClickedItem; private MenuItem? eventsSelectedItem; ``` \n**Binding**: ```razor Selected item: @selectedItem.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 IEnumerable> choiceGroupItems = basicNavBarCustoms.Select(i => new BitChoiceGroupItem() { Id = i.Title, Text = i.Title, IsEnabled = true, Value = i }); private MenuItem selectedItem = basicNavBarCustoms[0]; private MenuItem twoWaySelectedItem = basicNavBarCustoms[0]; ``` \n**Reselectable**: ```razor Item click count: @countClick ``` ```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 int countClick; private bool reselectable = true; ``` \n**Dynamic Items**: ```razor Add item Remove item Reverse items Selected item: @dynamicSelectedCustom?.Title ``` ```csharp public class MenuItem { public string? Title { get; set; } public string? ImageName { get; set; } } 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+" }, new() { Title = "Profile", ImageName = BitIconName.Contact, Marker = true }, ]; ```

\n**Basic**: ```razor ``` \n**Scrollable**: ```razor Select the last item Selected item: @scrollableSelectedOption?.Text ``` ```csharp private BitNavBarOption? scrollableSelectedOption; private BitNavBarOption scrollableOptionProfile = default!; ``` \n**Header & Footer**: ```razor ``` \n**Templates**: ```razor @option.Text ``` \n**Events**: ```razor Clicked item: @eventsClickedOption?.Text Selected item: @eventsSelectedOption?.Text ``` ```csharp private BitNavBarOption? eventsClickedOption; private BitNavBarOption? eventsSelectedOption; ``` \n**Binding**: ```razor Selected item: @bindingSelectedOption?.Text Selected item: @twoWaySelectedOption?.Text ``` ```csharp private BitNavBarOption? bindingSelectedOption; private BitNavBarOption bindingOptionProducts = default!; private BitNavBarOption? twoWaySelectedOption; private BitNavBarOption optionHome = default!; private BitNavBarOption optionProducts = default!; private BitNavBarOption optionAcademy = default!; private BitNavBarOption optionProfile = default!; protected override void OnAfterRender(bool firstRender) { if (firstRender) { // An option only exists once it has rendered, so the navbar that has to open on one is handed // its reference here, where the reference has been assigned. bindingSelectedOption ??= bindingOptionProducts; twoWaySelectedOption ??= optionHome; StateHasChanged(); } base.OnAfterRender(firstRender); } ``` \n**Reselectable**: ```razor Item click count: @countClick ``` ```csharp private int countClick; private bool reselectable = true; ``` \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 ```