# Nav **Also known as:** Tree, TreeView ## Description A navigation pane (Nav) provides links to the main areas of an app or site. This component can also be used as a TreeView to show parent-child data in a tree. ## 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 | `BitIconInfo?` | null | The icon for the chevron-down element of each nav item. Takes precedence over ChevronDownIconName when both are set. | | ChevronDownIconName | `string?` | null | The custom icon name of the chevron-down element of each nav item. | | 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. | | 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. | ## 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. | | 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. | ## Enums ### 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. | ### BitNavMatch Enum | Name | Value | Description | | :--- | :--- | :---------- | | Exact | 0 | Specifies that the nav item should be active when it matches exactly the current URL. | | Prefix | 1 | Specifies that the nav item should be active when it matches any prefix of the current URL. | | Regex | 2 | Specifies that the nav item should be active when its provided regex matches the current URL. | | Wildcard | 3 | Specifies that the nav item should be active when its provided wildcard matches the current URL. | ### BitNavMode Enum | Name | Value | Description | | :--- | :--- | :---------- | | Automatic | 0 | The value of selected key will change using NavigationManager and the current url inside the component. | | Manual | 1 | Selected key changes will be sent back to the parent component and the component won't change its value. | ### BitNavRenderType Enum | Name | Value | Description | | :--- | :--- | :---------- | | Normal | 0 | All items will be rendered normally only based on their own properties. | | Grouped | 1 | Root elements are rendered in a specific way that resembles a grouped list of items. | ### BitNavItemAriaCurrent Enum | Name | Value | Description | | :--- | :--- | :---------- | | Page | 0 | | | Step | 1 | | | Location | 2 | | | Date | 3 | | | Time | 4 | | | True | 5 | | ### BitNavItemTemplateRenderMode Enum | Name | Value | Description | | :--- | :--- | :---------- | | Normal | 0 | Renders the template inside the button/anchor root element of the item. | | Replace | 1 | Replaces the button/anchor root element of the item. | ### 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. | ## Sub Classes ### BitNavItem Properties | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | AriaCurrent | `BitNavAriaCurrent` | BitNavAriaCurrent.Page | Aria-current token for active nav item. Must be a valid token value, and defaults to 'page'. | | AriaLabel | `string?` | null | Aria label for nav item. Ignored if CollapseAriaLabel or ExpandAriaLabel is provided. | | Class | `string?` | null | Custom CSS class for the nav item. | | ChildItems | `List<BitNavItem>` | [] | A list of items to render as children of the current nav item. | | CollapseAriaLabel | `string?` | null | Aria label when nav item is collapsed and can be expanded. | | Data | `object?` | null | The custom data for the nav item to provide additional state. | | Description | `string?` | null | The description for the nav item. | | ExpandAriaLabel | `string?` | null | Aria label when nav item is collapsed and can be expanded. | | ForceAnchor | `bool` | false | Forces an anchor element render instead of button. | | Icon | `BitIconInfo?` | null | The icon to render next to the nav item. Takes precedence over IconName when both are set. | | IconName | `string?` | null | Name of an icon to render next to the nav item. | | IsEnabled | `bool` | true | Whether or not the nav item is enabled. | | IsExpanded | `bool` | false | Whether or not the nav item is in an expanded state. | | IsSeparator | `bool` | false | Indicates that the nav item should render as a separator. | | Key | `string?` | null | A unique value to use as a key or id of the nav item. | | Match | `BitNavMatch?` | null | Gets or sets a value representing the URL matching behavior of the nav item. | | Style | `string?` | null | Custom CSS style for the nav item. | | Target | `string?` | null | Link target, specifies how to open the nav item's link. | | Template | `RenderFragment<BitNavItem>?` | null | The custom template for the nav item to render. | | TemplateRenderMode | `BitNavItemTemplateRenderMode` | BitNavItemTemplateRenderMode.Normal | The render mode of the nav item's custom template. | | Text | `string` | string.Empty | Text to render for the nav item. | | Title | `string?` | null | Text for the tooltip of the nav item. | | Url | `string?` | null | The nav item's link URL. | | AdditionalUrls | `IEnumerable<string>?` | null | Alternative URLs to be considered when auto mode tries to detect the selected nav item by the current URL. | ### BitNavOption Properties | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | AriaCurrent | `BitNavAriaCurrent` | BitNavAriaCurrent.Page | Aria-current token for active nav option. Must be a valid token value, and defaults to 'page'. | | AriaLabel | `string?` | null | Aria label for nav option. Ignored if CollapseAriaLabel or ExpandAriaLabel is provided. | | Class | `string?` | null | Custom CSS class for the nav option. | | ChildContent | `RenderFragment?` | null | A list of options to render as children of the current nav option. | | CollapseAriaLabel | `string?` | null | Aria label when nav option is collapsed and can be expanded. | | Data | `object?` | null | The custom data for the nav option to provide additional state. | | Description | `string?` | null | The description for the nav option. | | ExpandAriaLabel | `string?` | null | Aria label when nav option is collapsed and can be expanded. | | ForceAnchor | `bool` | false | Forces an anchor element render instead of button. | | Icon | `BitIconInfo?` | null | The icon to render next to the nav option. Takes precedence over IconName when both are set. | | IconName | `string?` | null | Name of an icon to render next to the nav option. | | IsEnabled | `bool` | true | Whether or not the nav option is enabled. | | IsExpanded | `bool` | false | Whether or not the nav option is in an expanded state. | | IsSeparator | `bool` | false | Indicates that the nav option should render as a separator. | | Key | `string?` | null | A unique value to use as a key or id of the nav option. | | Match | `BitNavMatch?` | null | Gets or sets a value representing the URL matching behavior of the nav option. | | Style | `string?` | null | Custom CSS style for the nav option. | | Target | `string?` | null | Link target, specifies how to open the nav option's link. | | Template | `RenderFragment<BitNavItem>?` | null | The custom template for the nav option to render. | | TemplateRenderMode | `BitNavItemTemplateRenderMode` | BitNavItemTemplateRenderMode.Normal | The render mode of the nav option's custom template. | | Text | `string` | string.Empty | Text to render for the nav option. | | Title | `string?` | null | Text for the tooltip of the nav option. | | Url | `string?` | null | The nav option's link URL. | | AdditionalUrls | `IEnumerable<string>?` | null | Alternative URLs to be considered when auto mode tries to detect the selected nav option by the current URL. | ### 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. | | Icon | `BitNameSelectorPair<TItem, BitIconInfo?>` | new(nameof(BitNavItem.Icon)) | The Icon 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. | ### BitNavClassStyles Properties | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | Root | `String?` | null | Custom CSS classes/styles for the root element of the BitNav. | | Item | `String?` | null | Custom CSS classes/styles for the item of the BitNav. | | SelectedItem | `String?` | null | Custom CSS classes/styles for the selected item of the BitNav. | | ItemContainer | `String?` | null | Custom CSS classes/styles for the item container of the BitNav. | | ItemIcon | `String?` | null | Custom CSS classes/styles for the item icon of the BitNav. | | ItemText | `String?` | null | Custom CSS classes/styles for the item text of the BitNav. | | SelectedItemContainer | `String?` | null | Custom CSS classes/styles for the selected item container of the BitNav. | | ToggleButton | `String?` | null | Custom CSS classes/styles for the toggle button of the BitNav. | | Separator | `String?` | null | Custom CSS classes/styles for the separator of the BitNav. | ### BitIconInfo Properties | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | Name | `string?` | null | Gets or sets the name of the icon. | | BaseClass | `string?` | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. | | Prefix | `string?` | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. | ## Examples