Nav - bit BlazorUI
Home Docs

Nav

A navigation pane (Nav) provides links to the main areas of an app or site.

Notes

The BitNav is a Multi-API component which can accept the list of Items in 3 different ways: BitNavItem class, a custom Generic class, and BitNavOption component.

Usage

Implementation

BitNav parameters
Name
Type
Default value
Description
AriaCurrentField string AriaCurrent Aria-current token for active nav item. Must be a valid token value, and defaults to 'page'.
AriaCurrentFieldSelector Expression<Func<TItem, BitNavAriaCurrent>>? Aria-current token for active nav item. Must be a valid token value, and defaults to 'page'.
AriaLabelField string AriaLabel Aria label for the item. Ignored if collapseAriaLabel or expandAriaLabel is provided.
AriaLabelFieldSelector Expression<Func<TItem, string>>? null Aria label for the item. Ignored if collapseAriaLabel or expandAriaLabel is provided.
ChildContent RenderFragment? null Items to render as children.
ChildItemsField string ChildItems A list of items to render as children of the current item.
ChildItemsFieldSelector Expression<Func<TItem, IList<TItem>>>? null A list of items to render as children of the current item.
ClassStyles BitNavClassStyles? Custom CSS classes/styles for different parts of the component.
CollapseAriaLabelField string CollapseAriaLabel Aria label when group is collapsed.
CollapseAriaLabelFieldSelector Expression<Func<TItem, string>>? null Aria label when group is collapsed.
DefaultSelectedItem TItem? null The initially selected item in manual mode.
ExpandAriaLabelField string ExpandAriaLabel Aria label when group is expanded.
ExpandAriaLabelFieldSelector Expression<Func<TItem, string>>? null Aria label when group is expanded.
ForceAnchorField string ForceAnchor (Optional) By default, any link with onClick defined will render as a button. Set this property to true to override that behavior. (Links without onClick defined will render as anchors by default.)
ForceAnchorFieldSelector Expression<Func<TItem, bool>>? null (Optional) By default, any link with onClick defined will render as a button. Set this property to true to override that behavior. (Links without onClick defined will render as anchors by default.)
HeaderTemplate RenderFragment<TItem>? null Used to customize how content inside the group header is rendered.
IconNameField string IconName Name of an icon to render next to the item button.
IconNameFieldSelector Expression<Func<TItem, string>>? null Name of an icon to render next to the item button.
IsEnabledField string IsEnabled Whether or not the item is disabled.
IsEnabledFieldSelector Expression<Func<TItem, bool>>? null Whether or not the item is disabled.
IsExpandedField string IsExpanded Whether or not the group is in an expanded state.
IsExpandedFieldSelector Expression<Func<TItem, bool>>? null Whether or not the group is in an expanded state.
Items IList<TItem> new List<TItem>() A collection of item to display in the navigation bar.
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.
KeyField string Key A unique value to use as a key or id of the item.
KeyFieldSelector Expression<Func<TItem, string>>? null A unique value to use as a key or id of the item.
Mode BitNavMode BitNavMode.Automatic Determines how the navigation will be handled.
OnItemClick EventCallback<TItem> Callback invoked 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.
SelectedItem TItem? null Selected item to show in Nav.
StyleField string Style Custom style for the each item element.
StyleFieldSelector Expression<Func<TItem, string>>? null Custom style for the each item element.
TargetField string Target Link target, specifies how to open the item link.
TargetFieldSelector Expression<Func<TItem, string>>? null Link target, specifies how to open the item link.
TemplateField string Template The field name of the Template property in the nav item class.
TemplateFieldSelector Expression<Func<TItem, RenderFragment>>? null The field selector of the Template property in the nav item class.
TemplateRenderModeField string TemplateRenderMode The field name of the TemplateRenderMode property in the nav item class.
TemplateRenderModeFieldSelector Expression<Func<TItem, BitNavItemTemplateRenderMode>>? null The field selector of the TemplateRenderMode property in the nav item class.
TextField string Name Text to render for the item.
TextFieldSelector Expression<Func<TItem, string>>? null Text to render for the item.
TitleField string Title Text for the item tooltip.
TitleFieldSelector Expression<Func<TItem, string>>? null Text for the item tooltip.
UrlField string Url URL to navigate for the item link.
UrlFieldSelector Expression<Func<TItem, string>>? null URL to navigate for the item link.
AdditionalUrlsField string Url Alternative URLs to be considered when auto mode tries to detect the selected item by the current URL.
AdditionalUrlsFieldSelector Expression<Func<TItem, IEnumerable<string>>>? null Alternative URLs to be considered when auto mode tries to detect the selected item by the current URL.
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.
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.
BitNavClassStyles properties
Name
Type
Default value
Description
Item BitClassStylePair? null Custom CSS classes/styles for item.
SelectedItem BitClassStylePair? null Custom CSS classes/styles for selected item.
ItemContainer BitClassStylePair? null Custom CSS classes/styles for item container.
ItemIcon BitClassStylePair? null Custom CSS classes/styles for item icon.
SelectedItemContainer BitClassStylePair? null Custom CSS classes/styles for selected item container.
ToggleButton BitClassStylePair? null Custom CSS classes/styles for toggle button.
BitClassStylePair properties
Name
Type
Default value
Description
Class string? null Custom CSS class.
Style string? null Custom CSS style.
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).