Home Docs

Nav
Tree
TreeView

A navigation pane (Nav) provides links to the main areas of an app or site. This component can also be sued as a TreeView to show parent-child data in a tree.

Notes

The BitNav is a
Multi-API
component which can accept the list of Items in 3 different ways:
1. The
BitNavItem
 class
2. A
Custom Generic
class
3. The
BitNavOption
 component

Usage

API

BitNav 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.
ChildContent RenderFragment? null Items to render as children.
Classes BitNavClassStyles? null Custom CSS classes for different parts of the BitNav component.
Color BitColor? null The general color of the nav that is only used for colored parts like icons.
DefaultSelectedItem TItem? null The initially selected item in manual mode.
FitWidth bool false Renders the nav in a width to only fit its content.
FullWidth bool false Renders the nav in full width of its container element.
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.
IconOnly bool false Only renders the icon of each nav 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.
IndentValue int 16 The indentation value in px for each level of depth of child item.
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.
Match BitNavMatch? null Gets or sets a value representing the global URL matching behavior of the nav.
Mode BitNavMode BitNavMode.Automatic Determines how the navigation will be handled.
NameSelectors BitNavNameSelectors<TItem>? null Names and selectors of the custom input type properties.
NoCollapse bool Hides all collapse/expand buttons and remove their spaces at the start of each node.
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.
Reselectable bool false Enables recalling the select events when the same item is selected.
ReversedChevron bool false Reverses the location of the expander chevron.
SelectedItem TItem? null Selected item to show in the BitNav.
SingleExpand bool false Enables the single-expand mode in the BitNav.
Styles BitNavClassStyles? null Custom CSS styles for different parts of the BitNav component.
BitNav public members
Name
Type
Default value
Description
CollapseAll Action<TItem? item> Collapses all items and children.
ExpandAll Action<TItem? item> Expands all items and children in non-SingleExpand mode.
ToggleItem Func<Task, TItem> Toggles an item.
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.
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.
Match BitNameSelectorPair<TItem, BitNavMatch?> new(nameof(BitNavItem.Match)) The Match 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.
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

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.
  • On this page