Home Docs

NavPanel

BitNavPanel is a navigation component specialized to be rendered in a vertical panel. In its core it's utilizing the BitNav component to render the nav items.

Notes

To use this component, you need to install the
Bit.BlazorUI.Extras
 nuget package, as described in the Optional steps of the Getting started page.

Usage

Basic
<BitToggleButton @bind-IsChecked="basicIsOpen" OnText="Close" OffText="Open" />

<div style="width:222px">
    <BitNavPanel @bind-IsOpen="basicIsOpen" Items="basicNavItems" />
</div>
@code {
    private bool basicIsOpen;
    
    private List<BitNavItem> basicNavItems =
    [
        new()
        {
            Text = "Home",
            IconName = BitIconName.Home,
            Url = "HomePage",
        },
        new()
        {
            Text = "AdminPanel",
            IconName = BitIconName.Admin,
            ChildItems =
            [
                new() {
                    Text = "Dashboard",
                    IconName = BitIconName.BarChartVerticalFill,
                    Url = "DashboardPage",
                },
                new() {
                    Text = "Categories",
                    IconName = BitIconName.BuildQueue,
                    Url = "CategoriesPage",
                },
                new() {
                    Text = "Products",
                    IconName = BitIconName.Product,
                    Url = "ProductsPage",
                }
            ]
        },
        new()
        {
            Text = "Todo",
            IconName = BitIconName.ToDoLogoOutline,
            Url = "TodoPage",
        },
        new()
        {
            Text = "Settings",
            IconName = BitIconName.Equalizer,
            Url = "SettingsPage"
        },
        new()
        {
            Text = "Terms",
            IconName = BitIconName.EntityExtraction,
            Url = "TermsPage",
        }
    ];
}
FitWidth
<BitToggleButton @bind-IsChecked="fitWidthIsOpen" OnText="Close" OffText="Open" />

<BitNavPanel @bind-IsOpen="fitWidthIsOpen" Items="basicNavItems" FitWidth />
@code {
    private bool fitWidthIsOpen;
    
    private List<BitNavItem> basicNavItems =
    [
        new()
        {
            Text = "Home",
            IconName = BitIconName.Home,
            Url = "HomePage",
        },
        new()
        {
            Text = "AdminPanel",
            IconName = BitIconName.Admin,
            ChildItems =
            [
                new() {
                    Text = "Dashboard",
                    IconName = BitIconName.BarChartVerticalFill,
                    Url = "DashboardPage",
                },
                new() {
                    Text = "Categories",
                    IconName = BitIconName.BuildQueue,
                    Url = "CategoriesPage",
                },
                new() {
                    Text = "Products",
                    IconName = BitIconName.Product,
                    Url = "ProductsPage",
                }
            ]
        },
        new()
        {
            Text = "Todo",
            IconName = BitIconName.ToDoLogoOutline,
            Url = "TodoPage",
        },
        new()
        {
            Text = "Settings",
            IconName = BitIconName.Equalizer,
            Url = "SettingsPage"
        },
        new()
        {
            Text = "Terms",
            IconName = BitIconName.EntityExtraction,
            Url = "TermsPage",
        }
    ];
}
FullWidth
<BitToggleButton @bind-IsChecked="fullWidthIsOpen" OnText="Close" OffText="Open" />

<BitNavPanel @bind-IsOpen="fullWidthIsOpen" Items="basicNavItems" FullWidth />
@code {
    private bool fullWidthIsOpen;
    
    private List<BitNavItem> basicNavItems =
    [
        new()
        {
            Text = "Home",
            IconName = BitIconName.Home,
            Url = "HomePage",
        },
        new()
        {
            Text = "AdminPanel",
            IconName = BitIconName.Admin,
            ChildItems =
            [
                new() {
                    Text = "Dashboard",
                    IconName = BitIconName.BarChartVerticalFill,
                    Url = "DashboardPage",
                },
                new() {
                    Text = "Categories",
                    IconName = BitIconName.BuildQueue,
                    Url = "CategoriesPage",
                },
                new() {
                    Text = "Products",
                    IconName = BitIconName.Product,
                    Url = "ProductsPage",
                }
            ]
        },
        new()
        {
            Text = "Todo",
            IconName = BitIconName.ToDoLogoOutline,
            Url = "TodoPage",
        },
        new()
        {
            Text = "Settings",
            IconName = BitIconName.Equalizer,
            Url = "SettingsPage"
        },
        new()
        {
            Text = "Terms",
            IconName = BitIconName.EntityExtraction,
            Url = "TermsPage",
        }
    ];
}
NoToggle
<BitToggleButton @bind-IsChecked="noToggleIsOpen" OnText="Close" OffText="Open" />

<div style="width:222px">
    <BitNavPanel @bind-IsOpen="noToggleIsOpen" Items="basicNavItems" NoToggle />
</div>
@code {
    private bool noToggleIsOpen;
    
    private List<BitNavItem> basicNavItems =
    [
        new()
        {
            Text = "Home",
            IconName = BitIconName.Home,
            Url = "HomePage",
        },
        new()
        {
            Text = "AdminPanel",
            IconName = BitIconName.Admin,
            ChildItems =
            [
                new() {
                    Text = "Dashboard",
                    IconName = BitIconName.BarChartVerticalFill,
                    Url = "DashboardPage",
                },
                new() {
                    Text = "Categories",
                    IconName = BitIconName.BuildQueue,
                    Url = "CategoriesPage",
                },
                new() {
                    Text = "Products",
                    IconName = BitIconName.Product,
                    Url = "ProductsPage",
                }
            ]
        },
        new()
        {
            Text = "Todo",
            IconName = BitIconName.ToDoLogoOutline,
            Url = "TodoPage",
        },
        new()
        {
            Text = "Settings",
            IconName = BitIconName.Equalizer,
            Url = "SettingsPage"
        },
        new()
        {
            Text = "Terms",
            IconName = BitIconName.EntityExtraction,
            Url = "TermsPage",
        }
    ];
}
Icon
<BitToggleButton @bind-IsChecked="iconUrlIsOpen" OnText="Close" OffText="Open" />

<div style="width:222px">
    <BitNavPanel @bind-IsOpen="iconUrlIsOpen" Items="basicNavItems" IconNavUrl="https://bitplatform.dev" IconUrl="/images/icon.png" />
</div>
@code {
    private bool iconUrlIsOpen;
    
    private List<BitNavItem> basicNavItems =
    [
        new()
        {
            Text = "Home",
            IconName = BitIconName.Home,
            Url = "HomePage",
        },
        new()
        {
            Text = "AdminPanel",
            IconName = BitIconName.Admin,
            ChildItems =
            [
                new() {
                    Text = "Dashboard",
                    IconName = BitIconName.BarChartVerticalFill,
                    Url = "DashboardPage",
                },
                new() {
                    Text = "Categories",
                    IconName = BitIconName.BuildQueue,
                    Url = "CategoriesPage",
                },
                new() {
                    Text = "Products",
                    IconName = BitIconName.Product,
                    Url = "ProductsPage",
                }
            ]
        },
        new()
        {
            Text = "Todo",
            IconName = BitIconName.ToDoLogoOutline,
            Url = "TodoPage",
        },
        new()
        {
            Text = "Settings",
            IconName = BitIconName.Equalizer,
            Url = "SettingsPage"
        },
        new()
        {
            Text = "Terms",
            IconName = BitIconName.EntityExtraction,
            Url = "TermsPage",
        }
    ];
}
SearchBoxPlaceholder
<BitToggleButton @bind-IsChecked="searchBoxPlaceholderIsOpen" OnText="Close" OffText="Open" />

<div style="width:240px">
    <BitNavPanel @bind-IsOpen="searchBoxPlaceholderIsOpen" Items="basicNavItems" SearchBoxPlaceholder="Search in menu items..." />
</div>
@code {
    private bool searchBoxPlaceholderIsOpen;
    
    private List<BitNavItem> basicNavItems =
    [
        new()
        {
            Text = "Home",
            IconName = BitIconName.Home,
            Url = "HomePage",
        },
        new()
        {
            Text = "AdminPanel",
            IconName = BitIconName.Admin,
            ChildItems =
            [
                new() {
                    Text = "Dashboard",
                    IconName = BitIconName.BarChartVerticalFill,
                    Url = "DashboardPage",
                },
                new() {
                    Text = "Categories",
                    IconName = BitIconName.BuildQueue,
                    Url = "CategoriesPage",
                },
                new() {
                    Text = "Products",
                    IconName = BitIconName.Product,
                    Url = "ProductsPage",
                }
            ]
        },
        new()
        {
            Text = "Todo",
            IconName = BitIconName.ToDoLogoOutline,
            Url = "TodoPage",
        },
        new()
        {
            Text = "Settings",
            IconName = BitIconName.Equalizer,
            Url = "SettingsPage"
        },
        new()
        {
            Text = "Terms",
            IconName = BitIconName.EntityExtraction,
            Url = "TermsPage",
        }
    ];
}
NoSearchBox
<BitToggleButton @bind-IsChecked="noSearchBoxIsOpen" OnText="Close" OffText="Open" />

<div style="width:222px">
    <BitNavPanel @bind-IsOpen="noSearchBoxIsOpen" Items="basicNavItems" NoSearchBox />
</div>
@code {
    private bool noSearchBoxIsOpen;
    
    private List<BitNavItem> basicNavItems =
    [
        new()
        {
            Text = "Home",
            IconName = BitIconName.Home,
            Url = "HomePage",
        },
        new()
        {
            Text = "AdminPanel",
            IconName = BitIconName.Admin,
            ChildItems =
            [
                new() {
                    Text = "Dashboard",
                    IconName = BitIconName.BarChartVerticalFill,
                    Url = "DashboardPage",
                },
                new() {
                    Text = "Categories",
                    IconName = BitIconName.BuildQueue,
                    Url = "CategoriesPage",
                },
                new() {
                    Text = "Products",
                    IconName = BitIconName.Product,
                    Url = "ProductsPage",
                }
            ]
        },
        new()
        {
            Text = "Todo",
            IconName = BitIconName.ToDoLogoOutline,
            Url = "TodoPage",
        },
        new()
        {
            Text = "Settings",
            IconName = BitIconName.Equalizer,
            Url = "SettingsPage"
        },
        new()
        {
            Text = "Terms",
            IconName = BitIconName.EntityExtraction,
            Url = "TermsPage",
        }
    ];
}
EmptyListMessage
<BitToggleButton @bind-IsChecked="emptyListMessageIsOpen" OnText="Close" OffText="Open" />

<div style="width:222px">
    <BitNavPanel @bind-IsOpen="emptyListMessageIsOpen" Items="basicNavItems" EmptyListMessage="There is no item found." />
</div>
@code {
    private bool emptyListMessageIsOpen;
    
    private List<BitNavItem> basicNavItems =
    [
        new()
        {
            Text = "Home",
            IconName = BitIconName.Home,
            Url = "HomePage",
        },
        new()
        {
            Text = "AdminPanel",
            IconName = BitIconName.Admin,
            ChildItems =
            [
                new() {
                    Text = "Dashboard",
                    IconName = BitIconName.BarChartVerticalFill,
                    Url = "DashboardPage",
                },
                new() {
                    Text = "Categories",
                    IconName = BitIconName.BuildQueue,
                    Url = "CategoriesPage",
                },
                new() {
                    Text = "Products",
                    IconName = BitIconName.Product,
                    Url = "ProductsPage",
                }
            ]
        },
        new()
        {
            Text = "Todo",
            IconName = BitIconName.ToDoLogoOutline,
            Url = "TodoPage",
        },
        new()
        {
            Text = "Settings",
            IconName = BitIconName.Equalizer,
            Url = "SettingsPage"
        },
        new()
        {
            Text = "Terms",
            IconName = BitIconName.EntityExtraction,
            Url = "TermsPage",
        }
    ];
}
Templates
NavPanel header
<BitToggleButton @bind-IsChecked="templateIsOpen" OnText="Close" OffText="Open" />

<BitNavPanel @bind-IsOpen="templateIsOpen" Items="basicNavItems" FitWidth NoToggle>
    <Header>
        <BitText Typography="BitTypography.H5"><b>NavPanel</b> header</BitText>
    </Header>
    <ItemTemplate Context="item">
        <BitText><i><b>@item.Text</b></i></BitText>
        <BitSpacer />
        @if (item.Data is not null)
        {
            <BitTag Size="BitSize.Small" Color="BitColor.Info">@item.Data</BitTag>
        }
    </ItemTemplate>
    <Footer>
        <BitActionButton IconName="@BitIconName.PowerButton">Logout</BitActionButton>
    </Footer>
</BitNavPanel>
@code {
    private bool templateIsOpen;
    
    private List<BitNavItem> templateNavItems =
    [
        new()
        {
            Text = "Home",
            IconName = BitIconName.Home,
            Url = "HomePage",
            Data = 13,
        },
        new()
        {
            Text = "AdminPanel",
            IconName = BitIconName.Admin,
            ChildItems =
            [
                new() {
                    Text = "Dashboard",
                    IconName = BitIconName.BarChartVerticalFill,
                    Url = "DashboardPage",
                    Data = 63,
                },
                new() {
                    Text = "Categories",
                    IconName = BitIconName.BuildQueue,
                    Url = "CategoriesPage",
                },
                new() {
                    Text = "Products",
                    IconName = BitIconName.Product,
                    Url = "ProductsPage",
                }
            ]
        },
        new()
        {
            Text = "Todo",
            IconName = BitIconName.ToDoLogoOutline,
            Url = "TodoPage",
        },
        new()
        {
            Text = "Settings",
            IconName = BitIconName.Equalizer,
            Url = "SettingsPage",
            Data = 85,
        },
        new()
        {
            Text = "Terms",
            IconName = BitIconName.EntityExtraction,
            Url = "TermsPage",
        }
    ];
}
Events
Clicked item:
Toggled item: 
<BitToggleButton @bind-IsChecked="eventIsOpen" OnText="Close" OffText="Open" />

<div>
    Clicked item: @onItemClick?.Text
    <br />
    Toggled item: @onItemToggle?.Text
</div>

<div style="width:222px">
    <BitNavPanel @bind-IsOpen="eventIsOpen"
                    Items="eventNavItems"
                    OnItemClick="(BitNavItem item) => HandleOnItemClick(item)"
                    OnItemToggle="(BitNavItem item) => HandleOnItemToggle(item)" />
</div>
@code {
    private bool eventIsOpen;
    private BitNavItem? onItemClick;
    private BitNavItem? onItemToggle;
    
    private void HandleOnItemClick(BitNavItem item)
    {
        onItemClick = item;
    }
    
    private void HandleOnItemToggle(BitNavItem item)
    {
        onItemToggle = item;
    }
    
    private List<BitNavItem> eventNavItems =
    [
        new()
        {
            Text = "Home",
            IconName = BitIconName.Home,
        },
        new()
        {
            Text = "AdminPanel",
            IconName = BitIconName.Admin,
            ChildItems =
            [
                new() {
                    Text = "Dashboard",
                    IconName = BitIconName.BarChartVerticalFill,
                },
                new() {
                    Text = "Categories",
                    IconName = BitIconName.BuildQueue,
                },
                new() {
                    Text = "Products",
                    IconName = BitIconName.Product,
                }
            ]
        },
        new()
        {
            Text = "Todo",
            IconName = BitIconName.ToDoLogoOutline,
        },
        new()
        {
            Text = "Settings",
            IconName = BitIconName.Equalizer,
        },
        new()
        {
            Text = "Terms",
            IconName = BitIconName.EntityExtraction,
        }
    ];
}
Public APIs
<BitToggleButton @bind-IsChecked="publicApiIsOpen" OnText="Close" OffText="Open" />

<BitButton OnClick="async () => await navPanelRef.Toggle()">Toggle</BitButton>
<div style="width:222px">
    <BitNavPanel @bind-IsOpen="publicApiIsOpen" @ref="navPanelRef" Items="basicNavItems" HideToggle />
</div>
@code {
    private bool publicApiIsOpen;
    private BitNavPanel<BitNavItem> navPanelRef = default!;
    
    private List<BitNavItem> basicNavItems =
    [
        new()
        {
            Text = "Home",
            IconName = BitIconName.Home,
            Url = "HomePage",
        },
        new()
        {
            Text = "AdminPanel",
            IconName = BitIconName.Admin,
            ChildItems =
            [
                new() {
                    Text = "Dashboard",
                    IconName = BitIconName.BarChartVerticalFill,
                    Url = "DashboardPage",
                },
                new() {
                    Text = "Categories",
                    IconName = BitIconName.BuildQueue,
                    Url = "CategoriesPage",
                },
                new() {
                    Text = "Products",
                    IconName = BitIconName.Product,
                    Url = "ProductsPage",
                }
            ]
        },
        new()
        {
            Text = "Todo",
            IconName = BitIconName.ToDoLogoOutline,
            Url = "TodoPage",
        },
        new()
        {
            Text = "Settings",
            IconName = BitIconName.Equalizer,
            Url = "SettingsPage"
        },
        new()
        {
            Text = "Terms",
            IconName = BitIconName.EntityExtraction,
            Url = "TermsPage",
        }
    ];
}
Color
<BitToggleButton @bind-IsChecked="colorIsOpen" OnText="Close" OffText="Open" />

<div style="width:222px">
    <BitNavPanel @bind-IsOpen="colorIsOpen" Items="colorNavItems" Color="BitColor.Secondary" Accent="BitColor.SecondaryBackground" />
</div>
@code {
    private bool colorIsOpen;
    
    private List<BitNavItem> colorNavItems =
    [
        new()
        {
            Text = "Home",
            IconName = BitIconName.Home,
            Url = "HomePage",
        },
        new()
        {
            Text = "AdminPanel",
            IconName = BitIconName.Admin,
            ChildItems =
            [
                new() {
                    Text = "Dashboard",
                    IconName = BitIconName.BarChartVerticalFill,
                    Url = "DashboardPage",
                },
                new() {
                    Text = "Categories",
                    IconName = BitIconName.BuildQueue,
                    Url = "CategoriesPage",
                },
                new() {
                    Text = "Products",
                    IconName = BitIconName.Product,
                    Url = "ProductsPage",
                }
            ]
        },
        new()
        {
            Text = "Todo",
            IconName = BitIconName.ToDoLogoOutline,
            Url = "TodoPage",
        },
        new()
        {
            Text = "Settings",
            IconName = BitIconName.Equalizer,
            Url = "SettingsPage"
        },
        new()
        {
            Text = "Terms",
            IconName = BitIconName.EntityExtraction,
            Url = "TermsPage",
        }
    ];
}
Style & Class
<style>

@media(hover: hover) {
    .custom-nav-item:hover {
        color: #fff;
        border-radius: 7px;
        background-color: hsla(0,0%,100%,.1)
    }
}

.custom-nav-item-ico {
    color: #fff;
    font-weight: 600
}

.custom-nav-item-txt {
    color: #fff
}

.custom-input-container-searchbox {
    overflow: hidden;
    border-radius: 7px;
    align-items: center;
    border-color: hsla(0,0%,100%,.462745098);
    background-color: rgba(177,177,177,.4588235294)
}

.custom-focused-searchbox .custom-input-container-searchbox {
    border-width: 1px;
    border-color: hsla(0,0%,100%,.462745098)
}

.custom-clear-searchbox:hover {
    background: rgba(0,0,0,0)
}

.custom-icon-searchbox {
    color: #3a0647
}

.custom-icon-wrapper-searchbox {
    border-radius: 5px;
    background-color: rgba(0,0,0,0)
}

</style>

<BitToggleButton @bind-IsChecked="classStyleIsOpen" OnText="Close" OffText="Open" />

<div style="width:222px">
    <BitNavPanel @bind-IsOpen="classStyleIsOpen"
                Items="basicNavItems"
                Styles="@(new() { Container = "background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);" })"
                NavClasses="@(new() { ItemContainer = "custom-nav-item", ItemIcon = "custom-nav-item-ico", ItemText = "custom-nav-item-txt" })"
                SearchBoxClasses="@(new() { Icon = "custom-icon-searchbox",
                                            Focused = "custom-focused-searchbox",
                                            ClearButton = "custom-clear-searchbox",
                                            IconWrapper = "custom-icon-wrapper-searchbox",
                                            InputContainer = "custom-input-container-searchbox" })" />
</div>
@code {
    private bool classStyleIsOpen;
    
    private List<BitNavItem> basicNavItems =
    [
        new()
        {
            Text = "Home",
            IconName = BitIconName.Home,
            Url = "HomePage",
        },
        new()
        {
            Text = "AdminPanel",
            IconName = BitIconName.Admin,
            ChildItems =
            [
                new() {
                    Text = "Dashboard",
                    IconName = BitIconName.BarChartVerticalFill,
                    Url = "DashboardPage",
                },
                new() {
                    Text = "Categories",
                    IconName = BitIconName.BuildQueue,
                    Url = "CategoriesPage",
                },
                new() {
                    Text = "Products",
                    IconName = BitIconName.Product,
                    Url = "ProductsPage",
                }
            ]
        },
        new()
        {
            Text = "Todo",
            IconName = BitIconName.ToDoLogoOutline,
            Url = "TodoPage",
        },
        new()
        {
            Text = "Settings",
            IconName = BitIconName.Equalizer,
            Url = "SettingsPage"
        },
        new()
        {
            Text = "Terms",
            IconName = BitIconName.EntityExtraction,
            Url = "TermsPage",
        }
    ];
}
RTL
<BitToggleButton @bind-IsChecked="rtlIsOpen" OnText="Close" OffText="Open" />

<BitNavPanel @bind-IsOpen="rtlIsOpen" Items="rtlNavItems" FitWidth Dir="BitDir.Rtl" />
@code {
    private bool rtlIsOpen;
    
    private List<BitNavItem> rtlNavItems =
    [
        new()
        {
            Text = "خانه",
            IconName = BitIconName.Home,
            Url = "HomePage",
        },
        new()
        {
            Text = "ادمین پنل",
            IconName = BitIconName.Admin,
            ChildItems =
            [
                new() {
                    Text = "داشبورد",
                    IconName = BitIconName.BarChartVerticalFill,
                    Url = "DashboardPage",
                },
                new() {
                    Text = "دسته‌ها",
                    IconName = BitIconName.BuildQueue,
                    Url = "CategoriesPage",
                },
                new() {
                    Text = "کالاها",
                    IconName = BitIconName.Product,
                    Url = "ProductsPage",
                }
            ]
        },
        new()
        {
            Text = "وظایف",
            IconName = BitIconName.ToDoLogoOutline,
            Url = "TodoPage",
        },
        new()
        {
            Text = "تنظیمات",
            IconName = BitIconName.Equalizer,
            Url = "SettingsPage"
        },
        new()
        {
            Text = "قوانین",
            IconName = BitIconName.EntityExtraction,
            Url = "TermsPage",
        }
    ];
}

API

BitNavPanel parameters
Name
Type
Default value
Description
Accent BitColor? null The accent color of the nav.
AllExpanded bool false Expands all items on first render.
ChevronDownIcon string? null The custom icon name of the chevron-down element of the BitNav component.
Classes BitNavPanelClassStyles? null Custom CSS classes for different parts of the nav panel.
Color BitColor? null The general color of the nav.
EmptyListTemplate RenderFragment? null The custom template for when the search result is empty.
EmptyListMessage string? null The custom message for when the search result is empty.
FitWidth bool false Renders the nav panel with fit-content width.
Footer RenderFragment? null The custom template to render as the footer of the nav panel.
FullWidth bool false Renders the nav panel with full (100%) width.
Header RenderFragment? null The custom template to render as the header of the nav panel.
HeaderTemplate RenderFragment<TItem>? null Used to customize how content inside the group header is rendered.
HeaderTemplateRenderMode BitNavItemTemplateRenderMode BitNavItemTemplateRenderMode.Normal The render mode of the custom HeaderTemplate.
HideToggle bool false Removes the toggle button.
IconNavUrl string? null Renders an anchor wrapping the icon to navigate to the specified url.
IconUrl string? null The icon url to show in the header of the nav panel.
IndentValue int 16 The indentation value in px for each level of depth of child item.
IndentPadding int 27 The indentation padding in px for items without children (compensation space for chevron icon).
IndentReversedPadding int 4 The indentation padding in px for items in reversed mode.
IsOpen bool false Determines if the nav panel is open in small screens.
IsToggled bool false Determines if the nav panel is in the toggled state.
Items IList<TItem> [] A collection of items to display in the nav panel.
ItemTemplate RenderFragment<TItem>? null Used to customize how content inside the item is rendered.
ItemTemplateRenderMode BitNavItemTemplateRenderMode BitNavItemTemplateRenderMode.Normal The render mode of the custom ItemTemplate.
NavClasses BitNavClassStyles? null Custom CSS classes for different parts of the nav component of the nav panel.
NavMatch BitNavMatch? null Determines the global URL matching behavior of the nav.
NavMode BitNavMode BitNavMode.Automatic Determines how the navigation will be handled.
NavStyles BitNavClassStyles? null Custom CSS styles for different parts of the nav component of the nav panel.
NoCollapse bool false Disables and hides all collapse/expand buttons of the nav component.
NoPad bool false Disables the padded mode of the nav panel.
NoSearchBox bool false Removes the search box from the nav panel.
NoToggle bool false Disables the toggle feature of the nav panel.
OnItemClick EventCallback<TItem> Event fired up when an item is clicked.
OnItemToggle EventCallback<TItem> Callback invoked when a group header is clicked and Expanded or Collapse.
OnSelectItem EventCallback<TItem> Callback invoked when an item is selected.
RenderType BitNavRenderType BitNavRenderType.Normal The way to render nav items.
Reselectable bool false Enables recalling the select events when the same item is selected.
ReversedChevron bool false Reverses the location of the expander chevron.
SearchBoxClasses BitSearchBoxClassStyles? null Custom CSS classes for different parts of the search box of the nav panel.
SearchBoxPlaceholder string? null The placeholder of the input element of the search box of the nav panel.
SearchBoxStyles BitSearchBoxClassStyles? null Custom CSS styles for different parts of the search box of the nav panel.
SingleExpand bool false Enables the single-expand mode in the BitNav.
Styles BitNavPanelClassStyles? null Custom CSS styles for different parts of the nav panel.
Top int 0 The top CSS property value of the root element of the nav panel in px.
BitNavPanel public members
Name
Type
Default value
Description
Toggle Task Toggles the nav panel if possible.
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.
BitNavPanelClassStyles properties
Name
Type
Default value
Description
Overlay string? null Custom CSS classes/styles for the overlay of the BitNavPanel.
Root string? null Custom CSS classes/styles for the root element of the BitNavPanel.
Toggled string? null Custom CSS classes/styles for the root element of the BitNavPanel when toggled.
Container string? null Custom CSS classes/styles for the container of the BitNavPanel.
Header string? null Custom CSS classes/styles for the header container of the BitNavPanel.
HeaderIcon string? null Custom CSS classes/styles for the header icon of the BitNavPanel.
ToggleButton string? null Custom CSS classes/styles for the toggle button of the BitNavPanel.
SearchBox string? null Custom CSS classes/styles for the search box of the BitNavPanel.
ToggleSearchButton string? null Custom CSS classes/styles for the toggle search button of the BitNavPanel.
EmptyListMessage string? null Custom CSS classes/styles for the empty list message of the BitNavPanel.
Nav string? null Custom CSS classes/styles for the nav component of the BitNavPanel.
BitColor enum
Name
Value
Description
Primary 0 Info Primary general color.
Secondary 1 Secondary general color.
Tertiary 2 Tertiary general color.
Info 3 Info general color.
Success 4 Success general color.
Warning 5 Warning general color.
SevereWarning 6 SevereWarning general color.
Error 7 Error general color.
PrimaryBackground 8 Primary background color.
SecondaryBackground 9 Secondary background color.
TertiaryBackground 10 Tertiary background color.
PrimaryForeground 11 Primary foreground color.
SecondaryForeground 12 Secondary foreground color.
TertiaryForeground 13 Tertiary foreground color.
PrimaryBorder 14 Primary border color.
SecondaryBorder 15 Secondary border color.
TertiaryBorder 16 Tertiary border color.
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