NavBar - bit BlazorUI

NavBar

NavMenu
TabPanel

A tab panel that provides navigation links to the main areas of an app.

Notes

The BitNavBar is a
Multi-API
component which can accept the list of Items in 3 different ways:
1. The
BitNavBarItem
class
2. A
Custom Generic
class
3. The
BitNavBarOption
component

Usage

Basic

<BitNavBar Items="basicNavBarItems" />
@code {
    private static readonly List<BitNavBarItem> 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 },
    ];
}

Disabled

Disabled:

Disabled item:

<BitNavBar Items="basicNavBarItems" IsEnabled="false" />

<BitNavBar Items="basicNavBarItemsDisabled" />
@code {
    private static readonly List<BitNavBarItem> 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<BitNavBarItem> basicNavBarItemsDisabled =
    [
        new() { Text = "Home", IconName = BitIconName.Home  },
        new() { Text = "Products", IconName = BitIconName.ProductVariant },
        new() { Text = "Academy", IconName = BitIconName.LearningTools, IsEnabled = false },
        new() { Text = "Profile", IconName = BitIconName.Contact },
    ];
}

Manual Mode

Defines the mode in which the selected item is handled manually, instead of automatically using the current url.

<BitNavBar Mode="BitNavMode.Manual"
           Items="basicNavBarItems"
           DefaultSelectedItem="basicNavBarItems[0]" />
@code {
    private static readonly List<BitNavBarItem> 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 },
    ];
}

IconOnly

Only renders the icon of each navbar item.

<BitNavBar Items="basicNavBarItems" IconOnly />
@code {
    private static readonly List<BitNavBarItem> 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 },
    ];
}

FitWidth

Enables fit-content width for the nav bar that sets the width of the component based on its content size.

<BitNavBar Items="basicNavBarItems" FitWidth />
@code {
    private static readonly List<BitNavBarItem> 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 },
    ];
}

Templates

Explore BitNavBar's customization capabilities.

ItemTemplate:

Item's template:

<BitNavBar Items="basicNavBarItems">
    <ItemTemplate Context="item">
        <BitText Typography="BitTypography.Caption1" Color="BitColor.Warning">@item.Text</BitText>
        <BitIcon IconName="@item.IconName" Color="BitColor.Success" />
    </ItemTemplate>
</BitNavBar>

<BitNavBar Items="templateNavBarItems" />

@code {
    private static readonly List<BitNavBarItem> templateNavBarItems =
    [
        new() { Text = "Home", IconName = BitIconName.Home  },
        new() { Text = "Products", Template = (item) => @<div style="display:flex;flex-direction:column"><b>@item.Text</b><span>🎁</span></div> },
        new() { Text = "Academy", IconName = BitIconName.LearningTools },
        new() { Text = "Profile", IconName = BitIconName.Contact },
    ];
}
@code {
    private static readonly List<BitNavBarItem> 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 },
    ];
}

Events

Managing NavBar item click event (OnItemClick).

Clicked item:

<BitNavBar Items="basicNavBarItems" OnItemClick="(BitNavBarItem item) => eventsClickedItem = item" />

Clicked item: @eventsClickedItem?.Text
@code {
    private BitNavBarItem? eventsClickedItem;
    
    private static readonly List<BitNavBarItem> 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 },
    ];
}

Binding

This example demonstrates different ways to handle item selection and changes within the component.

DefaultSelectedItem:

Selected item: Home

Two-way SelectedItem:

Home

Products

Academy

Profile

<BitNavBar Items="basicNavBarItems" Mode="BitNavMode.Manual" @bind-SelectedItem="selectedItem" DefaultSelectedItem="basicNavBarItems[1]" />
Selected item: @selectedItem.Text

<BitNavBar Items="basicNavBarItems" Mode="BitNavMode.Manual" @bind-SelectedItem="twoWaySelectedItem" />
<BitChoiceGroup Horizontal Items="@choiceGroupItems" @bind-Value="@twoWaySelectedItem" />
@code {
    private BitNavBarItem selectedItem = basicNavBarItems[0];
    private BitNavBarItem twoWaySelectedItem = basicNavBarItems[0];
    
    private static IEnumerable<BitChoiceGroupItem<BitNavBarItem>> choiceGroupItems =
             basicNavBarItems.Select(i => new BitChoiceGroupItem<BitNavBarItem>() { Id = i.Text, Text = i.Text, IsEnabled = i.IsEnabled, Value = i });
    
    private static readonly List<BitNavBarItem> 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 },
    ];
}

Reselectable

Enables the ability to trigger select event even when the same item is selected again.

Enabled recalling

Item click count: 0

<BitToggle @bind-Value="reselectable" OnText="Enabled recalling" OffText="Disabled recalling" />

<BitNavBar Items="basicNavBarItems"
           Mode="BitNavMode.Manual"
           Reselectable="reselectable"
           OnItemClick="(BitNavBarItem item) => countClick++" />

Item click count: @countClick
@code {
    private int countClick;
    private bool reselectable = true;
    
    private static readonly List<BitNavBarItem> 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 },
    ];
}

Advanced

An illustrative example of integrating this component into a straightforward mobile application.

bit BlazorUI

Products

<style>
    .mobile-frame {
        height: 666px;
        overflow: hidden;
        max-width: 375px;
        position: relative;
        border-radius: 36px;
        background-color: gray;
        border: 16px solid #333;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .mobile-frame::after {
        top: 10px;
        left: 50%;
        content: '';
        width: 60px;
        height: 5px;
        display: block;
        background: #333;
        position: absolute;
        border-radius: 10px;
        transform: translateX(-50%);
    }

    .screen {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
</style>

<div class="mobile-frame">
    <div class="screen">
        <BitSticky Top="0">
            <BitCard FullWidth>
                <BitStack Horizontal HorizontalAlign="BitAlignment.Center" VerticalAlign="BitAlignment.Center">
                    <BitImage Src="/images/bit-logo.svg" Width="50" />
                    <BitText Typography="BitTypography.H4" Color="BitColor.Info">
                        bit BlazorUI
                    </BitText>
                </BitStack>
            </BitCard>
        </BitSticky>
        <BitStack Alignment="BitAlignment.Center" AutoHeight Grows>
            <BitText Typography="BitTypography.H4" Color="BitColor.PrimaryForeground">
                <BitIcon IconName="@advancedSelectedItem.IconName" Color="BitColor.PrimaryForeground" Size="BitSize.Large" />
                <span>@advancedSelectedItem.Text</span>
            </BitText>
        </BitStack>
        <BitSticky Bottom="0">
            <BitCard FullWidth Style="padding:2px">
                <BitNavBar Items="basicNavBarItems"
                           Mode="BitNavMode.Manual"
                           @bind-SelectedItem="advancedSelectedItem" />
            </BitCard>
        </BitSticky>
    </div>
</div>
@code {
    private BitNavBarItem advancedSelectedItem = basicNavBarItems[1];
    
    private static readonly List<BitNavBarItem> 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 },
    ];
}

Color

Offering a range of specialized colors, providing visual cues for specific states within your application.

Primary:

Secondary:

Tertiary:

Info:

Success:

Warning:

SevereWarning:

Error:

PrimaryBackground:

SecondaryBackground:

TertiaryBackground:

PrimaryForeground:

SecondaryForeground:

TertiaryForeground:

PrimaryBorder:

SecondaryBorder:

TertiaryBorder:

<BitNavBar Color="BitColor.Primary" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
<BitNavBar Color="BitColor.Secondary" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
<BitNavBar Color="BitColor.Tertiary" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
<BitNavBar Color="BitColor.Info" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
<BitNavBar Color="BitColor.Success" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
<BitNavBar Color="BitColor.Warning" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
<BitNavBar Color="BitColor.SevereWarning" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
<BitNavBar Color="BitColor.Error" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />

<BitNavBar Color="BitColor.PrimaryBackground" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
<BitNavBar Color="BitColor.SecondaryBackground" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
<BitNavBar Color="BitColor.TertiaryBackground" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />

<BitNavBar Color="BitColor.PrimaryForeground" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
<BitNavBar Color="BitColor.SecondaryForeground" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
<BitNavBar Color="BitColor.TertiaryForeground" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
<BitNavBar Color="BitColor.PrimaryBorder" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
<BitNavBar Color="BitColor.SecondaryBorder" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
<BitNavBar Color="BitColor.TertiaryBorder" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
@code {
    private static readonly List<BitNavBarItem> 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 },
    ];
}

Style & Class

Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.

Component's Style:

Component's Class:

Item's style & class:

Styles:

Classes:

<style>
    .custom-class {
        margin: 1rem;
        border-radius: 1rem;
        box-shadow: aqua 0 0 1rem;
        background: linear-gradient(90deg, magenta, transparent) blue;
    }

    .custom-item {
        color: #ff7800;
        font-weight: 600;
    }

    .custom-item-ico {
        font-weight: bold;
        color: darkmagenta;
    }

    .custom-item-txt {
        font-weight: bold;
        font-style: italic;
    }
</style>

<BitNavBar Items="basicNavBarItems" Style="border-radius: 1rem; margin: 1rem; box-shadow: tomato 0 0 1rem;" />
<BitNavBar Items="basicNavBarItems" Class="custom-class" />

<BitNavBar Items="styleClassItems" />

<BitNavBar Items="basicNavBarItems" Styles="@(new() { ItemIcon = "color: aqua;", ItemText = "color: tomato;" })" />
<BitNavBar Items="basicNavBarItems" Classes="@(new() { ItemIcon = "custom-item-ico", ItemText = "custom-item-txt" })" />
@code {
    private static readonly List<BitNavBarItem> 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<BitNavBarItem> 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 },
    ];
}

RTL

Use BitNavBar in right-to-left (RTL).

<BitNavBar Dir="BitDir.Rtl" Items="rtlItems" />
@code {
    private static readonly List<BitNavBarItem> rtlItems =
    [
        new() { Text = "خانه", IconName = BitIconName.Home  },
        new() { Text = "محصولات", IconName = BitIconName.ProductVariant },
        new() { Text = "آکادمی", IconName = BitIconName.LearningTools },
        new() { Text = "پروفایل", IconName = BitIconName.Contact },
    ];
}

Basic

<BitNavBar Items="basicNavBarCustoms"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
@code {
    public class MenuItem
    {
        public string? Title { get; set; }
        public string? Icon { get; set; }
    }
    
    private static readonly List<MenuItem> basicNavBarCustoms =
    [
        new() { Title = "Home", Icon = BitIconName.Home  },
        new() { Title = "Products", Icon = BitIconName.ProductVariant },
        new() { Title = "Academy", Icon = BitIconName.LearningTools },
        new() { Title = "Profile", Icon = BitIconName.Contact },
    ];
}

Disabled

Disabled:

Disabled item:

<BitNavBar Items="basicNavBarCustoms" IsEnabled="false"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />

<BitNavBar Items="basicNavBarCustomsDisabled"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon },
                                    IsEnabled = { Selector = item => item.Disabled is false } })" />
@code {
    public class MenuItem
    {
        public string? Title { get; set; }
        public string? Icon { get; set; }
        public bool Disabled { get; set; }
    }
    
    private static readonly List<MenuItem> basicNavBarCustoms =
    [
        new() { Title = "Home", Icon = BitIconName.Home  },
        new() { Title = "Products", Icon = BitIconName.ProductVariant },
        new() { Title = "Academy", Icon = BitIconName.LearningTools },
        new() { Title = "Profile", Icon = BitIconName.Contact },
    ];
    
    private static readonly List<MenuItem> basicNavBarCustomsDisabled =
    [
        new() { Title = "Home", Icon = BitIconName.Home  },
        new() { Title = "Products", Icon = BitIconName.ProductVariant },
        new() { Title = "Academy", Icon = BitIconName.LearningTools, Disabled = true },
        new() { Title = "Profile", Icon = BitIconName.Contact },
    ];
}

Manual Mode

Defines the mode in which the selected item is handled manually, instead of automatically using the current url.

<BitNavBar Mode="BitNavMode.Manual"
           Items="basicNavBarCustoms"
           DefaultSelectedItem="basicNavBarCustoms[0]"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
@code {
    public class MenuItem
    {
        public string? Title { get; set; }
        public string? Icon { get; set; }
    }
    
    private static readonly List<MenuItem> basicNavBarCustoms =
    [
        new() { Title = "Home", Icon = BitIconName.Home  },
        new() { Title = "Products", Icon = BitIconName.ProductVariant },
        new() { Title = "Academy", Icon = BitIconName.LearningTools },
        new() { Title = "Profile", Icon = BitIconName.Contact },
    ];
}

IconOnly

Only renders the icon of each navbar item.

<BitNavBar IconOnly
           Items="basicNavBarCustoms"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
@code {
    public class MenuItem
    {
        public string? Title { get; set; }
        public string? Icon { get; set; }
    }
    
    private static readonly List<MenuItem> basicNavBarCustoms =
    [
        new() { Title = "Home", Icon = BitIconName.Home  },
        new() { Title = "Products", Icon = BitIconName.ProductVariant },
        new() { Title = "Academy", Icon = BitIconName.LearningTools },
        new() { Title = "Profile", Icon = BitIconName.Contact },
    ];
}

FitWidth

Enables fit-content width for the nav bar that sets the width of the component based on its content size.

<BitNavBar FitWidth
           Items="basicNavBarCustoms"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
@code {
    public class MenuItem
    {
        public string? Title { get; set; }
        public string? Icon { get; set; }
    }
    
    private static readonly List<MenuItem> basicNavBarCustoms =
    [
        new() { Title = "Home", Icon = BitIconName.Home  },
        new() { Title = "Products", Icon = BitIconName.ProductVariant },
        new() { Title = "Academy", Icon = BitIconName.LearningTools },
        new() { Title = "Profile", Icon = BitIconName.Contact },
    ];
}

Templates

Explore BitNavBar's customization capabilities.

ItemTemplate:

Item's template:

<BitNavBar Items="basicNavBarCustoms"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })">
    <ItemTemplate Context="custom">
        <BitText Typography="BitTypography.Caption1" Color="BitColor.Warning">@custom.Title</BitText>
        <BitIcon IconName="@custom.Icon" Color="BitColor.Success" />
    </ItemTemplate>
</BitNavBar>

<BitNavBar Items="templateNavBarCustoms"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon },
                                    Template = { Selector = item => item.Fragment } })" />

@code {
    private static readonly List<MenuItem> templateNavBarCustoms =
    [
        new() { Title = "Home", Icon = BitIconName.Home  },
        new() { Title = "Products", Fragment = (item) => @<div style="display:flex;flex-direction:column"><b>@item.Title</b><span>🎁</span></div> },
        new() { Title = "Academy", Icon = BitIconName.LearningTools },
        new() { Title = "Profile", Icon = BitIconName.Contact },
    ];
}
@code {
    public class MenuItem
    {
        public string? Title { get; set; }
        public string? Icon { get; set; }
        public RenderFragment<MenuItem>? Fragment { get; set; }
    }
    
    private static readonly List<MenuItem> basicNavBarCustoms =
    [
        new() { Title = "Home", Icon = BitIconName.Home  },
        new() { Title = "Products", Icon = BitIconName.ProductVariant },
        new() { Title = "Academy", Icon = BitIconName.LearningTools },
        new() { Title = "Profile", Icon = BitIconName.Contact },
    ];
}

Events

Managing NavBar item click event (OnItemClick).

Clicked item:

<BitNavBar Items="basicNavBarCustoms"
           OnItemClick="(MenuItem item) => eventsClickedItem = item"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />

Clicked item: @eventsClickedItem?.Title
@code {
    private MenuItem? eventsClickedItem;
    
    public class MenuItem
    {
        public string? Title { get; set; }
        public string? Icon { get; set; }
    }
    
    private static readonly List<MenuItem> basicNavBarCustoms =
    [
        new() { Title = "Home", Icon = BitIconName.Home  },
        new() { Title = "Products", Icon = BitIconName.ProductVariant },
        new() { Title = "Academy", Icon = BitIconName.LearningTools },
        new() { Title = "Profile", Icon = BitIconName.Contact },
    ];
}

Binding

This example demonstrates different ways to handle item selection and changes within the component.

DefaultSelectedItem:

Selected item: Home

Two-way SelectedItem:

Home

Products

Academy

Profile

<BitNavBar @bind-SelectedItem="selectedItem"
            Items="basicNavBarCustoms"
            Mode="BitNavMode.Manual"
            DefaultSelectedItem="basicNavBarCustoms[1]"
            NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
Selected item: @selectedItem.Title

<BitNavBar Items="basicNavBarCustoms"
           Mode="BitNavMode.Manual"
           @bind-SelectedItem="twoWaySelectedItem"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
<BitChoiceGroup Horizontal Items="@choiceGroupItems" @bind-Value="@twoWaySelectedItem" />
@code {
    private MenuItem selectedItem = basicNavBarCustoms[0];
    private MenuItem twoWaySelectedItem = basicNavBarCustoms[0];
    
    private static IEnumerable<BitChoiceGroupItem<MenuItem>> choiceGroupItems =
             basicNavBarCustoms.Select(i => new BitChoiceGroupItem<MenuItem>() { Id = i.Title, Text = i.Title, IsEnabled = true, Value = i });
    
    public class MenuItem
    {
        public string? Title { get; set; }
        public string? Icon { get; set; }
    }
    
    private static readonly List<MenuItem> basicNavBarCustoms =
    [
        new() { Title = "Home", Icon = BitIconName.Home  },
        new() { Title = "Products", Icon = BitIconName.ProductVariant },
        new() { Title = "Academy", Icon = BitIconName.LearningTools },
        new() { Title = "Profile", Icon = BitIconName.Contact },
    ];
}

Reselectable

Enables the ability to trigger select event even when the same item is selected again.

Enabled recalling

Item click count: 0

<BitToggle @bind-Value="reselectable" OnText="Enabled recalling" OffText="Disabled recalling" />

<BitNavBar Items="basicNavBarCustoms"
           Mode="BitNavMode.Manual"
           Reselectable="reselectable"
           OnItemClick="(MenuItem item) => countClick++"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />

Item click count: @countClick
@code {
    private int countClick;
    private bool reselectable = true;
    
    public class MenuItem
    {
        public string? Title { get; set; }
        public string? Icon { get; set; }
    }
    
    private static readonly List<MenuItem> basicNavBarCustoms =
    [
        new() { Title = "Home", Icon = BitIconName.Home  },
        new() { Title = "Products", Icon = BitIconName.ProductVariant },
        new() { Title = "Academy", Icon = BitIconName.LearningTools },
        new() { Title = "Profile", Icon = BitIconName.Contact },
    ];
}

Advanced

An illustrative example of integrating this component into a straightforward mobile application.

bit BlazorUI

Products

<style>
    .mobile-frame {
        height: 666px;
        overflow: hidden;
        max-width: 375px;
        position: relative;
        border-radius: 36px;
        background-color: gray;
        border: 16px solid #333;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .mobile-frame::after {
        top: 10px;
        left: 50%;
        content: '';
        width: 60px;
        height: 5px;
        display: block;
        background: #333;
        position: absolute;
        border-radius: 10px;
        transform: translateX(-50%);
    }

    .screen {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
</style>

<div class="mobile-frame">
    <div class="screen">
        <BitSticky Top="0">
            <BitCard FullWidth>
                <BitStack Horizontal HorizontalAlign="BitAlignment.Center" VerticalAlign="BitAlignment.Center">
                    <BitImage Src="/images/bit-logo.svg" Width="50" />
                    <BitText Typography="BitTypography.H4" Color="BitColor.Info">
                        bit BlazorUI
                    </BitText>
                </BitStack>
            </BitCard>
        </BitSticky>
        <BitStack Alignment="BitAlignment.Center" AutoHeight Grows>
            <BitText Typography="BitTypography.H4" Color="BitColor.PrimaryForeground">
                <BitIcon IconName="@advancedSelectedItem?.Icon" Color="BitColor.PrimaryForeground" Size="BitSize.Large" />
                <span>@advancedSelectedItem?.Title</span>
            </BitText>
        </BitStack>
        <BitSticky Bottom="0">
            <BitCard FullWidth Style="padding:2px">
                <BitNavBar Mode="BitNavMode.Manual"
                           Items="basicNavBarCustoms"
                           @bind-SelectedItem="advancedSelectedItem"
                           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                                    IconName = { Selector = item => item.Icon } })" />
            </BitCard>
        </BitSticky>
    </div>
</div>
@code {
    private MenuItem advancedSelectedItem = basicNavBarCustoms[1];
    
    public class MenuItem
    {
        public string? Title { get; set; }
        public string? Icon { get; set; }
    }
    
    private static readonly List<MenuItem> basicNavBarCustoms =
    [
        new() { Title = "Home", Icon = BitIconName.Home  },
        new() { Title = "Products", Icon = BitIconName.ProductVariant },
        new() { Title = "Academy", Icon = BitIconName.LearningTools },
        new() { Title = "Profile", Icon = BitIconName.Contact },
    ];
}

Color

Offering a range of specialized colors, providing visual cues for specific states within your application.

Primary:

Secondary:

Tertiary:

Info:

Success:

Warning:

SevereWarning:

Error:

PrimaryBackground:

SecondaryBackground:

TertiaryBackground:

PrimaryForeground:

SecondaryForeground:

TertiaryForeground:

PrimaryBorder:

SecondaryBorder:

TertiaryBorder:

<BitNavBar Color="BitColor.Primary"
           Items="basicNavBarCustoms"
           DefaultSelectedItem="basicNavBarCustoms[0]"
           Mode="BitNavMode.Manual"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
<BitNavBar Color="BitColor.Secondary"
           Items="basicNavBarCustoms"
           DefaultSelectedItem="basicNavBarCustoms[0]"
           Mode="BitNavMode.Manual"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
<BitNavBar Color="BitColor.Tertiary"
           Items="basicNavBarCustoms"
           DefaultSelectedItem="basicNavBarCustoms[0]"
           Mode="BitNavMode.Manual"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
<BitNavBar Color="BitColor.Info"
           Items="basicNavBarCustoms"
           DefaultSelectedItem="basicNavBarCustoms[0]"
           Mode="BitNavMode.Manual"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
<BitNavBar Color="BitColor.Success"
           Items="basicNavBarCustoms"
           DefaultSelectedItem="basicNavBarCustoms[0]"
           Mode="BitNavMode.Manual"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
<BitNavBar Color="BitColor.Warning"
           Items="basicNavBarCustoms"
           DefaultSelectedItem="basicNavBarCustoms[0]"
           Mode="BitNavMode.Manual"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
<BitNavBar Color="BitColor.SevereWarning"
           Items="basicNavBarCustoms"
           DefaultSelectedItem="basicNavBarCustoms[0]"
           Mode="BitNavMode.Manual"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
<BitNavBar Color="BitColor.Error"
           Items="basicNavBarCustoms"
           DefaultSelectedItem="basicNavBarCustoms[0]"
           Mode="BitNavMode.Manual"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />

<BitNavBar Color="BitColor.PrimaryBackground"
           Items="basicNavBarCustoms"
           DefaultSelectedItem="basicNavBarCustoms[0]"
           Mode="BitNavMode.Manual"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                IconName = { Selector = item => item.Icon } })" />
<BitNavBar Color="BitColor.SecondaryBackground"
           Items="basicNavBarCustoms"
           DefaultSelectedItem="basicNavBarCustoms[0]"
           Mode="BitNavMode.Manual"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                IconName = { Selector = item => item.Icon } })" />
<BitNavBar Color="BitColor.TertiaryBackground"
           Items="basicNavBarCustoms"
           DefaultSelectedItem="basicNavBarCustoms[0]"
           Mode="BitNavMode.Manual"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                IconName = { Selector = item => item.Icon } })" />

<BitNavBar Color="BitColor.PrimaryForeground"
            Items="basicNavBarCustoms"
            DefaultSelectedItem="basicNavBarCustoms[0]"
            Mode="BitNavMode.Manual"
            NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
<BitNavBar Color="BitColor.SecondaryForeground"
           Items="basicNavBarCustoms"
           DefaultSelectedItem="basicNavBarCustoms[0]"
           Mode="BitNavMode.Manual"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
<BitNavBar Color="BitColor.TertiaryForeground"
           Items="basicNavBarCustoms"
           DefaultSelectedItem="basicNavBarCustoms[0]"
           Mode="BitNavMode.Manual"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
<BitNavBar Color="BitColor.PrimaryBorder"
           Items="basicNavBarCustoms"
           DefaultSelectedItem="basicNavBarCustoms[0]"
           Mode="BitNavMode.Manual"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
<BitNavBar Color="BitColor.SecondaryBorder"
           Items="basicNavBarCustoms"
           DefaultSelectedItem="basicNavBarCustoms[0]"
           Mode="BitNavMode.Manual"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
<BitNavBar Color="BitColor.TertiaryBorder"
           Items="basicNavBarCustoms"
           DefaultSelectedItem="basicNavBarCustoms[0]"
           Mode="BitNavMode.Manual"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
@code {
    public class MenuItem
    {
        public string? Title { get; set; }
        public string? Icon { get; set; }
    }
    
    private static readonly List<MenuItem> basicNavBarCustoms =
    [
        new() { Title = "Home", Icon = BitIconName.Home  },
        new() { Title = "Products", Icon = BitIconName.ProductVariant },
        new() { Title = "Academy", Icon = BitIconName.LearningTools },
        new() { Title = "Profile", Icon = BitIconName.Contact },
    ];
}

Style & Class

Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.

Component's Style:

Component's Class:

Item's style & class:

Styles:

Classes:

<style>
    .custom-class {
        margin: 1rem;
        border-radius: 1rem;
        box-shadow: aqua 0 0 1rem;
        background: linear-gradient(90deg, magenta, transparent) blue;
    }

    .custom-item {
        color: #ff7800;
        font-weight: 600;
    }

    .custom-item-ico {
        font-weight: bold;
        color: darkmagenta;
    }

    .custom-item-txt {
        font-weight: bold;
        font-style: italic;
    }
</style>

<BitNavBar Items="basicNavBarCustoms"
           Style="border-radius: 1rem; margin: 1rem; box-shadow: tomato 0 0 1rem;"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
<BitNavBar Items="basicNavBarCustoms"
           Class="custom-class"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />

<BitNavBar Items="basicNavBarCustomsClassStyle"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon },
                                    Class = { Selector = item => item.CssClass },
                                    Style = { Selector = item => item.Style }})" />

<BitNavBar Items="basicNavBarCustoms"
           Styles="@(new() { ItemIcon = "color: aqua;", ItemText = "color: tomato;" })"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
<BitNavBar Items="basicNavBarCustoms"
           Classes="@(new() { ItemIcon = "custom-item-ico", ItemText = "custom-item-txt" })"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
@code {
    public class MenuItem
    {
        public string? Title { get; set; }
        public string? Icon { get; set; }
        public string? CssClass { get; set; }
        public string? Style { get; set; }
    }
    
    private static readonly List<MenuItem> basicNavBarCustoms =
    [
        new() { Title = "Home", Icon = BitIconName.Home  },
        new() { Title = "Products", Icon = BitIconName.ProductVariant },
        new() { Title = "Academy", Icon = BitIconName.LearningTools },
        new() { Title = "Profile", Icon = BitIconName.Contact },
    ];
    
    private static readonly List<MenuItem> basicNavBarCustomsClassStyle =
    [
        new() { Title = "Home", Icon = BitIconName.Home  },
        new() { Title = "Products", Icon = BitIconName.ProductVariant, CssClass = "custom-item" },
        new() { Title = "Academy", Icon = BitIconName.LearningTools, Style = "color: #b6ff00;font-weight: 600;" },
        new() { Title = "Profile", Icon = BitIconName.Contact },
    ];
}

RTL

Use BitNavBar in right-to-left (RTL).

<BitNavBar Dir="BitDir.Rtl"
           Items="rtlCustomsItems"
           NameSelectors="@(new() { Text = { Selector = item => item.Title },
                                    IconName = { Selector = item => item.Icon } })" />
@code {
    private static readonly List<MenuItem> rtlCustomsItems =
    [
        new() { Title = "خانه", Icon = BitIconName.Home  },
        new() { Title = "محصولات", Icon = BitIconName.ProductVariant },
        new() { Title = "آکادمی", Icon = BitIconName.LearningTools },
        new() { Title = "پروفایل", Icon = BitIconName.Contact },
    ];
}

Basic

<BitNavBar TItem="BitNavBarOption">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>

Disabled

Disabled:

Disabled item:

<BitNavBar TItem="BitNavBarOption" IsEnabled="false">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>

<BitNavBar TItem="BitNavBarOption">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" IsEnabled="false" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>

Manual Mode

Defines the mode in which the selected item is handled manually, instead of automatically using the current url.

<BitNavBar Mode="BitNavMode.Manual" TItem="BitNavBarOption">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>

IconOnly

Only renders the icon of each navbar item.

<BitNavBar TItem="BitNavBarOption" IconOnly>
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>

FitWidth

Enables fit-content width for the nav bar that sets the width of the component based on its content size.

<BitNavBar TItem="BitNavBarOption" FitWidth>
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>

Templates

Explore BitNavBar's customization capabilities.

ItemTemplate:

Item's template:

<BitNavBar TItem="BitNavBarOption">
    <Options>
        <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
        <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
        <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
        <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
    </Options>
    <ItemTemplate Context="option">
        <BitText Typography="BitTypography.Caption1" Color="BitColor.Warning">@option.Text</BitText>
        <BitIcon IconName="@option.IconName" Color="BitColor.Success" />
    </ItemTemplate>
</BitNavBar>

<BitNavBar TItem="BitNavBarOption">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products">
        <Template Context="option">
            <div style="display:flex;flex-direction:column"><b>@option.Text</b><span>🎁</span></div>
        </Template>
    </BitNavBarOption>
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>

Events

Managing NavBar item click event (OnItemClick).

Clicked item:

<BitNavBar TItem="BitNavBarOption" OnItemClick="(BitNavBarOption option) => eventsClickedOption = option">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>

Clicked item: @eventsClickedOption?.Text
@code {
    private BitNavBarOption? eventsClickedOption;
}

Binding

This example demonstrates different ways to handle item selection and changes within the component.

DefaultSelectedItem (not available):

Two-way SelectedItem:

Home

Products

Academy

Profile

<BitNavBar TItem="BitNavBarOption" Mode="BitNavMode.Manual" @bind-SelectedItem="twoWaySelectedOption">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" @ref="optionHome" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" @ref="optionProducts" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" @ref="optionAcademy" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" @ref="optionProfile" />
</BitNavBar>

<BitChoiceGroup Horizontal TItem="BitChoiceGroupOption<BitNavBarOption>" TValue="BitNavBarOption" @bind-Value="@twoWaySelectedOption">
    <BitChoiceGroupOption Text="Home" Id="Home" Value="optionHome" />
    <BitChoiceGroupOption Text="Products" Id="Products" Value="optionProducts" />
    <BitChoiceGroupOption Text="Academy" Id="Academy" Value="optionAcademy" />
    <BitChoiceGroupOption Text="Profile" Id="Profile" Value="optionProfile" />
</BitChoiceGroup>
@code {
    private BitNavBarOption? twoWaySelectedOption;
    
    private BitNavBarOption optionHome = default!;
    private BitNavBarOption optionProducts = default!;
    private BitNavBarOption optionAcademy = default!;
    private BitNavBarOption optionProfile = default!;
}

Reselectable

Enables the ability to trigger select event even when the same item is selected again.

Enabled recalling

Item click count: 0

<BitToggle @bind-Value="reselectable" OnText="Enabled recalling" OffText="Disabled recalling" />
<BitNavBar TItem="BitNavBarOption" Mode="BitNavMode.Manual" OnItemClick="(BitNavBarOption option) => countClick++" Reselectable="reselectable">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>
Item click count: @countClick
@code {
    private int countClick;
    private bool reselectable = true;
}

Advanced

An illustrative example of integrating this component into a straightforward mobile application.

bit BlazorUI

<style>
    .mobile-frame {
        height: 666px;
        overflow: hidden;
        max-width: 375px;
        position: relative;
        border-radius: 36px;
        background-color: gray;
        border: 16px solid #333;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .mobile-frame::after {
        top: 10px;
        left: 50%;
        content: '';
        width: 60px;
        height: 5px;
        display: block;
        background: #333;
        position: absolute;
        border-radius: 10px;
        transform: translateX(-50%);
    }

    .screen {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
</style>

<div class="mobile-frame">
    <div class="screen">
        <BitSticky Top="0">
            <BitCard FullWidth>
                <BitStack Horizontal HorizontalAlign="BitAlignment.Center" VerticalAlign="BitAlignment.Center">
                    <BitImage Src="/images/bit-logo.svg" Width="50" />
                    <BitText Typography="BitTypography.H4" Color="BitColor.Info">
                        bit BlazorUI
                    </BitText>
                </BitStack>
            </BitCard>
        </BitSticky>
        <BitStack Alignment="BitAlignment.Center" AutoHeight Grows>
            <BitText Typography="BitTypography.H4" Color="BitColor.PrimaryForeground">
                <BitIcon IconName="@advancedSelectedOption?.IconName" Color="BitColor.PrimaryForeground" Size="BitSize.Large" />
                <span>@advancedSelectedOption?.Text</span>
            </BitText>
        </BitStack>
        <BitSticky Bottom="0">
            <BitCard FullWidth Style="padding:2px">
                <BitNavBar TItem="BitNavBarOption" Mode="BitNavMode.Manual" @bind-SelectedItem="advancedSelectedOption">
                    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
                    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
                    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
                    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
                </BitNavBar>
            </BitCard>
        </BitSticky>
    </div>
</div>
@code {
    private BitNavBarOption? advancedSelectedOption;
}

Color

Offering a range of specialized colors, providing visual cues for specific states within your application.

Primary:

Secondary:

Tertiary:

Info:

Success:

Warning:

SevereWarning:

Error:

PrimaryBackground:

SecondaryBackground:

TertiaryBackground:

PrimaryForeground:

SecondaryForeground:

TertiaryForeground:

PrimaryBorder:

SecondaryBorder:

TertiaryBorder:

<BitNavBar Color="BitColor.Primary" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>
<BitNavBar Color="BitColor.Secondary" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>
<BitNavBar Color="BitColor.Tertiary" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>
<BitNavBar Color="BitColor.Info" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>
<BitNavBar Color="BitColor.Success" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>
<BitNavBar Color="BitColor.Warning" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>
<BitNavBar Color="BitColor.SevereWarning" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>
<BitNavBar Color="BitColor.Error" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>

<BitNavBar Color="BitColor.PrimaryBackground" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>
<BitNavBar Color="BitColor.SecondaryBackground" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>
<BitNavBar Color="BitColor.TertiaryBackground" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>

<BitNavBar Color="BitColor.PrimaryForeground" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>
<BitNavBar Color="BitColor.SecondaryForeground" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>
<BitNavBar Color="BitColor.TertiaryForeground" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>
<BitNavBar Color="BitColor.PrimaryBorder" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>
<BitNavBar Color="BitColor.SecondaryBorder" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>
<BitNavBar Color="BitColor.TertiaryBorder" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>

Style & Class

Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.

Component's Style:

Component's Class:

Item's style & class:

Styles:

Classes:

<style>
    .custom-class {
        margin: 1rem;
        border-radius: 1rem;
        box-shadow: aqua 0 0 1rem;
        background: linear-gradient(90deg, magenta, transparent) blue;
    }

    .custom-item {
        color: #ff7800;
        font-weight: 600;
    }

    .custom-item-ico {
        font-weight: bold;
        color: darkmagenta;
    }

    .custom-item-txt {
        font-weight: bold;
        font-style: italic;
    }
</style>

<BitNavBar Style="border-radius: 1rem; margin: 1rem; box-shadow: tomato 0 0 1rem;" TItem="BitNavBarOption">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>
<BitNavBar Class="custom-class" TItem="BitNavBarOption">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>

<BitNavBar TItem="BitNavBarOption">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" Class="custom-item" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" Style="color: #b6ff00;font-weight: 600;" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>

<BitNavBar Classes="@(new() { ItemIcon = "custom-item-ico", ItemText = "custom-item-txt" })" TItem="BitNavBarOption">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>
<BitNavBar Styles="@(new() { ItemIcon = "color: aqua;", ItemText = "color: tomato;" })" TItem="BitNavBarOption">
    <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
</BitNavBar>

RTL

Use BitNavBar in right-to-left (RTL).

<BitNavBar Dir="BitDir.Rtl" TItem="BitNavBarOption">
    <BitNavBarOption Text="خانه" IconName="@BitIconName.Home" />
    <BitNavBarOption Text="محصولات" IconName="@BitIconName.ProductVariant" />
    <BitNavBarOption Text="آکادمی" IconName="@BitIconName.LearningTools" />
    <BitNavBarOption Text="پروفایل" IconName="@BitIconName.Contact" />
</BitNavBar>

API

BitNavBar parameters

Name	Type	Default value	Description
ChildContent	RenderFragment?	null	Items to render as children.
Classes	BitNavClassStyles?	null	Custom CSS classes for different parts of the navbar.
Color	BitColor?	null	The general color of the navbar.
DefaultSelectedItem	TItem?	null	The initially selected item in manual mode.
FitWidth	bool	false	Renders the nav bat in a width to only fit its content.
FullWidth	bool	false	Renders the nav bar in full width of its container element.
IconOnly	bool	false	Only renders the icon of each navbar item.
Items	IList<TItem>	new List<TItem>()	A collection of items to display in the navbar.
ItemTemplate	RenderFragment<TItem>?	null	Used to customize how content inside the item is rendered.
Mode	BitNavMode	BitNavMode.Automatic	Determines how the navigation will be handled.
NameSelectors	BitNavNameSelectors<TItem>?	null	Names and selectors of the custom input type properties.
OnItemClick	EventCallback<TItem>		Callback invoked when an item is clicked.
OnSelectItem	EventCallback<TItem>		Callback invoked when an item is selected.
Options	RenderFragment?	null	Alias of ChildContent.
Reselectable	bool	false	Enables recalling the select events when the same item is selected.
SelectedItem	TItem?	null	Selected item to show in the navbar.
Styles	BitNavClassStyles?	null	Custom CSS styles for different parts of the navbar.

BitComponentBase parameters

Name	Type	Default value	Description
AriaLabel	string?	null	The aria-label of the control for the benefit of screen readers.
Class	string?	null	Custom CSS class for the root element of the component.
Dir	BitDir?	null	Determines the component direction.
HtmlAttributes	Dictionary<string, object>	new Dictionary<string, object>()	Capture and render additional attributes in addition to the component's parameters.
Id	string?	null	Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled	bool	true	Whether or not the component is enabled.
Style	string?	null	Custom CSS style for the root element of the component.
Visibility	BitVisibility	BitVisibility.Visible	Whether the component is visible, hidden or collapsed.

BitComponentBase public members

Name	Type	Default value	Description
UniqueId	Guid	Guid.NewGuid()	The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement	ElementReference		The ElementReference of the root element.

BitNavBarItem properties

Name	Type	Default value	Description
Class	string?	null	Custom CSS class for the navbar item.
Data	object?	null	The custom data for the navbar item to provide additional state.
IconName	string?	null	Name of an icon to render next to the navbar item.
IsEnabled	bool	true	Whether or not the navbar item is enabled.
Key	string?	null	A unique value to use as a key or id of the navbar item.
Style	string?	null	Custom CSS style for the navbar item.
Target	string?	null	Link target, specifies how to open the navbar item's link.
Template	RenderFragment<BitNavBarItem>?	null	The custom template for the navbar item to render.
Text	string	string.Empty	Text to render for the navbar item.
Title	string?	null	Text for the tooltip of the navbar item.
Url	string?	null	The navbar item's link URL.
AdditionalUrls	IEnumerable<string>?	null	Alternative URLs to be considered when auto mode tries to detect the selected navbar item by the current URL.

BitNavBarOption properties

Name	Type	Default value	Description
Class	string?	null	Custom CSS class for the navbar option.
Data	object?	null	The custom data for the navbar option to provide additional state.
IconName	string?	null	Name of an icon to render next to the navbar option.
IsEnabled	bool	true	Whether or not the navbar option is enabled.
Key	string?	null	A unique value to use as a key or id of the navbar option.
Style	string?	null	Custom CSS style for the navbar option.
Target	string?	null	Link target, specifies how to open the navbar option's link.
Template	RenderFragment<BitNavBarOption>?	null	The custom template for the navbar option to render.
Text	string	string.Empty	Text to render for the navbar option.
Title	string?	null	Text for the tooltip of the navbar option.
Url	string?	null	The navbar option's link URL.
AdditionalUrls	IEnumerable<string>?	null	Alternative URLs to be considered when auto mode tries to detect the selected navbar option by the current URL.

BitNavBarNameSelectors<TItem> properties

Name	Type	Default value	Description
Class	BitNameSelectorPair<TItem, string?>	new(nameof(BitNavBarItem.Class))	The Class field name and selector of the custom input class.
Data	BitNameSelectorPair<TItem, object?>	new(nameof(BitNavBarItem.Data))	The Data field name and selector of the custom input class.
IconName	BitNameSelectorPair<TItem, string?>	new(nameof(BitNavBarItem.IconName))	The IconName field name and selector of the custom input class.
IsEnabled	BitNameSelectorPair<TItem, bool?>	new(nameof(BitNavBarItem.IsEnabled))	The IsEnabled field name and selector of the custom input class.
Key	BitNameSelectorPair<TItem, string?>	new(nameof(BitNavBarItem.Key))	The Key field name and selector of the custom input class.
Style	BitNameSelectorPair<TItem, string?>	new(nameof(BitNavBarItem.Style))	The Style field name and selector of the custom input class.
Target	BitNameSelectorPair<TItem, string?>	new(nameof(BitNavBarItem.Target))	The Target field name and selector of the custom input class.
Template	BitNameSelectorPair<TItem, RenderFragment<TItem>?>	new(nameof(BitNavBarItem.Template))	The Template field name and selector of the custom input class.
Text	BitNameSelectorPair<TItem, string?>	new(nameof(BitNavBarItem.Text))	The Text field name and selector of the custom input class.
Title	BitNameSelectorPair<TItem, string?>	new(nameof(BitNavBarItem.Title))	The Title field name and selector of the custom input class.
Url	BitNameSelectorPair<TItem, string?>	new(nameof(BitNavBarItem.Url))	The Url field name and selector of the custom input class.
AdditionalUrls	BitNameSelectorPair<TItem, IEnumerable<string>?>	new(nameof(BitNavBarItem.AdditionalUrls))	The AdditionalUrls field name and selector of the custom input class.

BitNavBarClassStyles properties

Name	Type	Default value	Description
Root	string?	null	Custom CSS classes/styles for the root element of the BitNavBar.
Container	string?	null	Custom CSS classes/styles for the container of the items of the BitNavBar.
Item	string?	null	Custom CSS classes/styles for the item of the BitNavBar.
ItemIcon	string?	null	Custom CSS classes/styles for the item icon of the BitNavBar.
ItemText	string?	null	Custom CSS classes/styles for the item text of the BitNavBar.
SelectedItem	string?	null	Custom CSS classes/styles for the selected item of the BitNavBar.

BitNavMode enum

Name	Value	Description
Automatic	0	The value of selected key will change using NavigationManager and the current url inside the component.
Manual	1	Selected key changes will be sent back to the parent component and the component won't change its value.

BitVisibility enum

Name	Value	Description
Visible	0	The content of the component is visible.
Hidden	1	The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed	2	The component is hidden (display:none).

BitDir enum

Name	Value	Description
Ltr	0	Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl	1	Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto	2	Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.

On this page

NavBar NavMenuTabPanel

NavMenu

TabPanel

A tab panel that provides navigation links to the main areas of an app.

Notes

The BitNavBar is a Multi-API component which can accept the list of Items in 3 different ways: 1. The BitNavBarItem class 2. A Custom Generic class 3. The BitNavBarOption component

Usage

Basic

Disabled

Manual Mode

IconOnly

FitWidth

Templates

Events

Binding

Reselectable

Advanced

bit BlazorUI

Products

Color

Style & Class

RTL

Basic

Disabled

Manual Mode

IconOnly

FitWidth

Templates

Events

Binding

Reselectable

Advanced

bit BlazorUI

Products

Color

Style & Class

RTL

Basic

Disabled

Manual Mode

IconOnly

FitWidth

Templates

Events

Binding

Reselectable

Advanced

bit BlazorUI

Color

Style & Class

RTL

API

BitNavBar parameters

Name

Type

Default value

Description

BitComponentBase parameters

Name

Type

Default value

Description

BitComponentBase public members

Name

Type

Default value

Description

BitNavBarItem properties

Name

Type

Default value

Description

BitNavBarOption properties

Name

Type

Default value

Description

BitNavBarNameSelectors<TItem> properties

Name

Type

NavBar

NavMenu
TabPanel

The BitNavBar is a
Multi-API
component which can accept the list of Items in 3 different ways:
1. The
BitNavBarItem
class
2. A
Custom Generic
class
3. The
BitNavBarOption
component