Skip to content
BlazorUI

Extras

NavPanel

Bit.BlazorUI.Extras
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

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

FitWidth

FullWidth

NoToggle

Icon

SearchBoxPlaceholder

NoSearchBox

EmptyListMessage

Templates

NavPanel header

Events

Clicked item:
Toggled item:

Public APIs

Color

Style & Class

RTL

API

Every parameter, public member, sub-class and enum this component exposes.

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 Gets or sets the accessible label for the component, used by assistive technologies.
Class string? null Gets or sets the CSS class name(s) to apply to the rendered element.
Dir BitDir? null Gets or sets the text directionality for the component's content.
ForceAnimation bool false Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters.
Id string? null Gets or sets the unique identifier for the component's root element.
IsEnabled bool true Gets or sets a value indicating whether the component is enabled and can respond to user interaction.
Style string? null Gets or sets the CSS style string to apply to the rendered element.
TabIndex string? null Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility BitVisibility BitVisibility.Visible Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name Type Default value Description
UniqueId Guid Guid.NewGuid() Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement ElementReference Gets the reference to the root HTML element associated with this component.

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

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.