Home Docs

NavPanel

BitNavPanel is a navigation component specialized to be rendered in a vertical panel.

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
RTL

API

BitNavPanel parameters
Name
Type
Default value
Description
Classes BitNavPanelClassStyles? null Custom CSS classes for different parts of the nav panel.
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.
Footer RenderFragment? null The custom template to render as the footer of the nav panel.
Header RenderFragment? null The custom template to render as the header of the nav panel.
IconUrl string? null The icon url to show in the header of the nav panel.
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.
NavClasses BitNavClassStyles? null Custom CSS classes for different parts of the nav component of the nav panel.
NavStyles BitNavClassStyles? null Custom CSS styles for different parts of the nav component of the nav panel.
NoPad bool false Disables the padded mode of 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.
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.
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.
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.
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.
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.
  • On this page