Accent color
# NavBar
**Also known as:** NavMenu, TabPanel
## Description
A tab panel that provides navigation links to the main areas of an app.
## 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. |
| 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 |
| :--- | :--- | :------------ | :---------- |
| 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
### 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. |
### 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
### BitNavBarItem Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Class | `string?` | null | Custom CSS class for the navbar item. |
| Data | `object?` | null | The custom data for the navbar item to provide additional state. |
| Icon | `BitIconInfo?` | null | Gets or sets the icon to display using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set. |
| IconName | `string?` | null | Gets or sets the name of the icon to display from the built-in Fluent UI icons. |
| IsEnabled | `bool` | true | Whether or not the navbar item is enabled. |
| Key | `string?` | null | A unique value to use as a key or id of the navbar item. |
| Style | `string?` | null | Custom CSS style for the navbar item. |
| Target | `string?` | null | Link target, specifies how to open the navbar item's link. |
| Template | `RenderFragment<BitNavBarItem>?` | null | The custom template for the navbar item to render. |
| Text | `string` | string.Empty | Text to render for the navbar item. |
| Title | `string?` | null | Text for the tooltip of the navbar item. |
| Url | `string?` | null | The navbar item's link URL. |
| AdditionalUrls | `IEnumerable<string>?` | null | Alternative URLs to be considered when auto mode tries to detect the selected navbar item by the current URL. |
### BitNavBarOption Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Class | `string?` | null | Custom CSS class for the navbar option. |
| Data | `object?` | null | The custom data for the navbar option to provide additional state. |
| Icon | `BitIconInfo?` | null | Gets or sets the icon to display using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set. |
| IconName | `string?` | null | Gets or sets the name of the icon to display from the built-in Fluent UI icons. |
| IsEnabled | `bool` | true | Whether or not the navbar option is enabled. |
| Key | `string?` | null | A unique value to use as a key or id of the navbar option. |
| Style | `string?` | null | Custom CSS style for the navbar option. |
| Target | `string?` | null | Link target, specifies how to open the navbar option's link. |
| Template | `RenderFragment<BitNavBarOption>?` | null | The custom template for the navbar option to render. |
| Text | `string` | string.Empty | Text to render for the navbar option. |
| Title | `string?` | null | Text for the tooltip of the navbar option. |
| Url | `string?` | null | The navbar option's link URL. |
| AdditionalUrls | `IEnumerable<string>?` | null | Alternative URLs to be considered when auto mode tries to detect the selected navbar option by the current URL. |
### 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. |
| Icon | `BitNameSelectorPair<TItem, BitIconInfo?>` | new(nameof(BitNavBarItem.Icon)) | The Icon field name and selector of the custom input class. Maps to Icon for external icon libraries. |
| IconName | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitNavBarItem.IconName)) | The IconName field name and selector of the custom input class. Maps to IconName for built-in Fluent UI icons. |
| 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. |
### 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. |
### 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. |
## Examples
\n**Basic**:
```razor
basicNavBarItems =
[
new() { Text = "Home", IconName = BitIconName.Home },
new() { Text = "Products", IconName = BitIconName.ProductVariant },
new() { Text = "Academy", IconName = BitIconName.LearningTools },
new() { Text = "Profile", IconName = BitIconName.Contact },
];
```
\n**Templates**:
```razor
@item.Text
templateNavBarItems =
[
new() { Text = "Home", IconName = BitIconName.Home },
new() { Text = "Products", Template = (item) => @ basicNavBarItems =
[
new() { Text = "Home", IconName = BitIconName.Home },
new() { Text = "Products", IconName = BitIconName.ProductVariant },
new() { Text = "Academy", IconName = BitIconName.LearningTools },
new() { Text = "Profile", IconName = BitIconName.Contact },
];
```
\n**Events**:
```razor
basicNavBarItems =
[
new() { Text = "Home", IconName = BitIconName.Home },
new() { Text = "Products", IconName = BitIconName.ProductVariant },
new() { Text = "Academy", IconName = BitIconName.LearningTools },
new() { Text = "Profile", IconName = BitIconName.Contact },
];
```
\n**Binding**:
```razor
> choiceGroupItems =
basicNavBarItems.Select(i => new BitChoiceGroupItem() { Id = i.Text, Text = i.Text, IsEnabled = i.IsEnabled, Value = i });
private static readonly List basicNavBarItems =
[
new() { Text = "Home", IconName = BitIconName.Home },
new() { Text = "Products", IconName = BitIconName.ProductVariant },
new() { Text = "Academy", IconName = BitIconName.LearningTools },
new() { Text = "Profile", IconName = BitIconName.Contact },
];
```
\n**Reselectable**:
```razor
basicNavBarItems =
[
new() { Text = "Home", IconName = BitIconName.Home },
new() { Text = "Products", IconName = BitIconName.ProductVariant },
new() { Text = "Academy", IconName = BitIconName.LearningTools },
new() { Text = "Profile", IconName = BitIconName.Contact },
];
```
\n**Advanced**:
```razor
bit BlazorUI
```
```csharp
private BitNavBarItem advancedSelectedItem = basicNavBarItems[1];
private static readonly List basicNavBarItems =
[
new() { Text = "Home", IconName = BitIconName.Home },
new() { Text = "Products", IconName = BitIconName.ProductVariant },
new() { Text = "Academy", IconName = BitIconName.LearningTools },
new() { Text = "Profile", IconName = BitIconName.Contact },
];
```
\n**External Icons**:
```razor
externalIconItems =
[
new() { Text = "Home", Icon = "fa-solid fa-house" },
new() { Text = "Products", Icon = BitIconInfo.Css("fa-solid fa-box") },
new() { Text = "Academy", Icon = BitIconInfo.Fa("solid graduation-cap") },
new() { Text = "Profile", Icon = BitIconInfo.Fa("solid user") },
];
```
\n**Style & Class**:
```razor
basicNavBarItems =
[
new() { Text = "Home", IconName = BitIconName.Home },
new() { Text = "Products", IconName = BitIconName.ProductVariant },
new() { Text = "Academy", IconName = BitIconName.LearningTools },
new() { Text = "Profile", IconName = BitIconName.Contact },
];
private static readonly List styleClassItems =
[
new() { Text = "Home", IconName = BitIconName.Home },
new() { Text = "Products", IconName = BitIconName.ProductVariant, Class = "custom-item" },
new() { Text = "Academy", IconName = BitIconName.LearningTools, Style = "color: #b6ff00;font-weight: 600;" },
new() { Text = "Profile", IconName = BitIconName.Contact },
];
```
@item.Text🎁
},
new() { Text = "Academy", IconName = BitIconName.LearningTools },
new() { Text = "Profile", IconName = BitIconName.Contact },
];
}
```
```csharp
private static readonly List