- bit BlazorUI
Home Docs

NavBar

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: BitNavBarItem class, a custom Generic class, and BitNavBarOption component.

Usage

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.
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.
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