- bit BlazorUI

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
ChildContent RenderFragment? null Items to render as children.
Classes BitNavClassStyles? null Custom CSS classes for different parts of the BitNav component.
DefaultSelectedItem TItem? null The initially selected item in manual mode.
HeaderTemplate RenderFragment<TItem>? null Used to customize how content inside the group header is rendered.
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.
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.
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.
ReversedChevron bool false Reverses the location of the expander chevron.
SelectedItem TItem? null Selected item to show in Nav.
Styles BitNavClassStyles? null Custom CSS styles for different parts of the BitNav component.
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.
BitNavNameSelectors<TItem> properties
Name
Type
Default value
Description
AriaCurrent BitNameSelectorPair<TItem, BitNavAriaCurrent?> new(nameof(BitNavItem.AriaCurrent)) The AriaCurrent field name and selector of the custom input class.
AriaLabel BitNameSelectorPair<TItem, string?> new(nameof(BitNavItem.AriaLabel)) The AriaLabel field name and selector of the custom input class.
Class BitNameSelectorPair<TItem, string?> new(nameof(BitNavItem.Class)) The Class field name and selector of the custom input class.
ChildItems BitNameSelectorPair<TItem, List<TItem>?> new(nameof(BitNavItem.ChildItems)) The ChildItems field name and selector of the custom input class.
CollapseAriaLabel BitNameSelectorPair<TItem, string?> new(nameof(BitNavItem.CollapseAriaLabel)) The CollapseAriaLabel field name and selector of the custom input class.
Data BitNameSelectorPair<TItem, object?> new(nameof(BitNavItem.Data)) The Data field name and selector of the custom input class.
Description BitNameSelectorPair<TItem, string?> new(nameof(BitNavItem.Description)) The Description field name and selector of the custom input class.
ExpandAriaLabel BitNameSelectorPair<TItem, string?> new(nameof(BitNavItem.ExpandAriaLabel)) The ExpandAriaLabel field name and selector of the custom input class.
ForceAnchor BitNameSelectorPair<TItem, bool?> new(nameof(BitNavItem.ForceAnchor)) The ForceAnchor field name and selector of the custom input class.
IconName BitNameSelectorPair<TItem, string?> new(nameof(BitNavItem.IconName)) The IconName field name and selector of the custom input class.
IsEnabled BitNameSelectorPair<TItem, bool?> new(nameof(BitNavItem.IsEnabled)) The IsEnabled field name and selector of the custom input class.
IsExpanded BitNameSelectorPair<TItem, bool?> new(nameof(BitNavItem.IsExpanded)) The IsExpanded field name and selector of the custom input class.
IsSeparator BitNameSelectorPair<TItem, bool?> new(nameof(BitNavItem.IsSeparator)) The IsSeparator field name and selector of the custom input class.
Key BitNameSelectorPair<TItem, string?> new(nameof(BitNavItem.Key)) The Key field name and selector of the custom input class.
Style BitNameSelectorPair<TItem, string?> new(nameof(BitNavItem.Style)) The Style field name and selector of the custom input class.
Target BitNameSelectorPair<TItem, string?> new(nameof(BitNavItem.Target)) The Target field name and selector of the custom input class.
TemplateRenderMode BitNameSelectorPair<TItem, BitNavItemTemplateRenderMode?> new(nameof(BitNavItem.TemplateRenderMode)) The TemplateRenderMode field name and selector of the custom input class.
Text BitNameSelectorPair<TItem, string?> new(nameof(BitNavItem.Text)) The Text field name and selector of the custom input class.
Title BitNameSelectorPair<TItem, string?> new(nameof(BitNavItem.Title)) The Title field name and selector of the custom input class.
Url BitNameSelectorPair<TItem, string?> new(nameof(BitNavItem.Url)) The Url field name and selector of the custom input class.
AdditionalUrls BitNameSelectorPair<TItem, IEnumerable<string>?> new(nameof(BitNavItem.AdditionalUrls)) The AdditionalUrls field name and selector of the custom input class.
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).