Accent color
# NavPanel
## Description
BitNavPanel is a navigation component specialized to be rendered in a vertical panel.
## 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. |
| Classes | `BitNavPanelClassStyles?` | null | Custom CSS classes for different parts of the nav panel. |
| Color | `BitColor?` | null | The general color of the nav. |
| EmptyListTemplate | `RenderFragment?` | null | The custom template for when the search result is empty. |
| EmptyListMessage | `string?` | null | The custom message for when the search result is empty. |
| FitWidth | `bool` | false | Renders the nav panel with fit-content width. |
| Footer | `RenderFragment?` | null | The custom template to render as the footer of the nav panel. |
| FullWidth | `bool` | false | Renders the nav panel with full (100%) width. |
| Header | `RenderFragment?` | null | The custom template to render as the header of the nav panel. |
| 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. |
| HideToggle | `bool` | false | Removes the toggle button. |
| IconNavUrl | `string?` | null | Renders an anchor wrapping the icon to navigate to the specified url. |
| IconUrl | `string?` | null | The icon url to show in the header of the nav panel. |
| IndentValue | `int` | 16 | The indentation value in px for each level of depth of child 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. |
| IsOpen | `bool` | false | Determines if the nav panel is open in small screens. |
| IsToggled | `bool` | false | Determines if the nav panel is in the toggled state. |
| Items | `IList<TItem>` | [] | A collection of items to display in the nav panel. |
| 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. |
| NavClasses | `BitNavClassStyles?` | null | Custom CSS classes for different parts of the nav component of the nav panel. |
| NavMatch | `BitNavMatch?` | null | Determines the global URL matching behavior of the nav. |
| NavMode | `BitNavMode` | BitNavMode.Automatic | Determines how the navigation will be handled. |
| NavStyles | `BitNavClassStyles?` | null | Custom CSS styles for different parts of the nav component of the nav panel. |
| NoCollapse | `bool` | false | Disables and hides all collapse/expand buttons of the nav component. |
| NoPad | `bool` | false | Disables the padded mode of the nav panel. |
| NoSearchBox | `bool` | false | Removes the search box from the nav panel. |
| NoToggle | `bool` | false | Disables the toggle feature of the nav panel. |
| OnItemClick | `EventCallback<TItem>` | | Event fired up 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. |
| SearchBoxClasses | `BitSearchBoxClassStyles?` | null | Custom CSS classes for different parts of the search box of the nav panel. |
| SearchBoxPlaceholder | `string?` | null | The placeholder of the input element of the search box of the nav panel. |
| SearchBoxStyles | `BitSearchBoxClassStyles?` | null | Custom CSS styles for different parts of the search box of the nav panel. |
| SingleExpand | `bool` | false | Enables the single-expand mode in the BitNav. |
| Styles | `BitNavPanelClassStyles?` | null | Custom CSS styles for different parts of the nav panel. |
| Top | `int` | 0 | The top CSS property value of the root element of the nav panel in px. |
| 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 |
| :--- | :--- | :------------ | :---------- |
| Toggle | `Task` | | Toggles the nav panel if possible. |
| 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. |
### 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
### BitNavPanelClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Overlay | `string?` | null | Custom CSS classes/styles for the overlay of the BitNavPanel. |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitNavPanel. |
| Toggled | `string?` | null | Custom CSS classes/styles for the root element of the BitNavPanel when toggled. |
| Container | `string?` | null | Custom CSS classes/styles for the container of the BitNavPanel. |
| Header | `string?` | null | Custom CSS classes/styles for the header container of the BitNavPanel. |
| HeaderIcon | `string?` | null | Custom CSS classes/styles for the header icon of the BitNavPanel. |
| ToggleButton | `string?` | null | Custom CSS classes/styles for the toggle button of the BitNavPanel. |
| SearchBox | `string?` | null | Custom CSS classes/styles for the search box of the BitNavPanel. |
| ToggleSearchButton | `string?` | null | Custom CSS classes/styles for the toggle search button of the BitNavPanel. |
| EmptyListMessage | `string?` | null | Custom CSS classes/styles for the empty list message of the BitNavPanel. |
| Nav | `string?` | null | Custom CSS classes/styles for the nav component of the BitNavPanel. |
## Examples
\n**Basic**:
```razor
basicNavItems =
[
new()
{
Text = "Home",
IconName = BitIconName.Home,
Url = "HomePage",
},
new()
{
Text = "AdminPanel",
IconName = BitIconName.Admin,
ChildItems =
[
new() {
Text = "Dashboard",
IconName = BitIconName.BarChartVerticalFill,
Url = "DashboardPage",
},
new() {
Text = "Categories",
IconName = BitIconName.BuildQueue,
Url = "CategoriesPage",
},
new() {
Text = "Products",
IconName = BitIconName.Product,
Url = "ProductsPage",
}
]
},
new()
{
Text = "Todo",
IconName = BitIconName.ToDoLogoOutline,
Url = "TodoPage",
},
new()
{
Text = "Settings",
IconName = BitIconName.Equalizer,
Url = "SettingsPage"
},
new()
{
Text = "Terms",
IconName = BitIconName.EntityExtraction,
Url = "TermsPage",
}
];
```
\n**FitWidth**:
```razor
basicNavItems =
[
new()
{
Text = "Home",
IconName = BitIconName.Home,
Url = "HomePage",
},
new()
{
Text = "AdminPanel",
IconName = BitIconName.Admin,
ChildItems =
[
new() {
Text = "Dashboard",
IconName = BitIconName.BarChartVerticalFill,
Url = "DashboardPage",
},
new() {
Text = "Categories",
IconName = BitIconName.BuildQueue,
Url = "CategoriesPage",
},
new() {
Text = "Products",
IconName = BitIconName.Product,
Url = "ProductsPage",
}
]
},
new()
{
Text = "Todo",
IconName = BitIconName.ToDoLogoOutline,
Url = "TodoPage",
},
new()
{
Text = "Settings",
IconName = BitIconName.Equalizer,
Url = "SettingsPage"
},
new()
{
Text = "Terms",
IconName = BitIconName.EntityExtraction,
Url = "TermsPage",
}
];
```
\n**FullWidth**:
```razor
basicNavItems =
[
new()
{
Text = "Home",
IconName = BitIconName.Home,
Url = "HomePage",
},
new()
{
Text = "AdminPanel",
IconName = BitIconName.Admin,
ChildItems =
[
new() {
Text = "Dashboard",
IconName = BitIconName.BarChartVerticalFill,
Url = "DashboardPage",
},
new() {
Text = "Categories",
IconName = BitIconName.BuildQueue,
Url = "CategoriesPage",
},
new() {
Text = "Products",
IconName = BitIconName.Product,
Url = "ProductsPage",
}
]
},
new()
{
Text = "Todo",
IconName = BitIconName.ToDoLogoOutline,
Url = "TodoPage",
},
new()
{
Text = "Settings",
IconName = BitIconName.Equalizer,
Url = "SettingsPage"
},
new()
{
Text = "Terms",
IconName = BitIconName.EntityExtraction,
Url = "TermsPage",
}
];
```
\n**NoToggle**:
```razor
basicNavItems =
[
new()
{
Text = "Home",
IconName = BitIconName.Home,
Url = "HomePage",
},
new()
{
Text = "AdminPanel",
IconName = BitIconName.Admin,
ChildItems =
[
new() {
Text = "Dashboard",
IconName = BitIconName.BarChartVerticalFill,
Url = "DashboardPage",
},
new() {
Text = "Categories",
IconName = BitIconName.BuildQueue,
Url = "CategoriesPage",
},
new() {
Text = "Products",
IconName = BitIconName.Product,
Url = "ProductsPage",
}
]
},
new()
{
Text = "Todo",
IconName = BitIconName.ToDoLogoOutline,
Url = "TodoPage",
},
new()
{
Text = "Settings",
IconName = BitIconName.Equalizer,
Url = "SettingsPage"
},
new()
{
Text = "Terms",
IconName = BitIconName.EntityExtraction,
Url = "TermsPage",
}
];
```
\n**Icon**:
```razor
basicNavItems =
[
new()
{
Text = "Home",
IconName = BitIconName.Home,
Url = "HomePage",
},
new()
{
Text = "AdminPanel",
IconName = BitIconName.Admin,
ChildItems =
[
new() {
Text = "Dashboard",
IconName = BitIconName.BarChartVerticalFill,
Url = "DashboardPage",
},
new() {
Text = "Categories",
IconName = BitIconName.BuildQueue,
Url = "CategoriesPage",
},
new() {
Text = "Products",
IconName = BitIconName.Product,
Url = "ProductsPage",
}
]
},
new()
{
Text = "Todo",
IconName = BitIconName.ToDoLogoOutline,
Url = "TodoPage",
},
new()
{
Text = "Settings",
IconName = BitIconName.Equalizer,
Url = "SettingsPage"
},
new()
{
Text = "Terms",
IconName = BitIconName.EntityExtraction,
Url = "TermsPage",
}
];
```
\n**SearchBoxPlaceholder**:
```razor
basicNavItems =
[
new()
{
Text = "Home",
IconName = BitIconName.Home,
Url = "HomePage",
},
new()
{
Text = "AdminPanel",
IconName = BitIconName.Admin,
ChildItems =
[
new() {
Text = "Dashboard",
IconName = BitIconName.BarChartVerticalFill,
Url = "DashboardPage",
},
new() {
Text = "Categories",
IconName = BitIconName.BuildQueue,
Url = "CategoriesPage",
},
new() {
Text = "Products",
IconName = BitIconName.Product,
Url = "ProductsPage",
}
]
},
new()
{
Text = "Todo",
IconName = BitIconName.ToDoLogoOutline,
Url = "TodoPage",
},
new()
{
Text = "Settings",
IconName = BitIconName.Equalizer,
Url = "SettingsPage"
},
new()
{
Text = "Terms",
IconName = BitIconName.EntityExtraction,
Url = "TermsPage",
}
];
```
\n**NoSearchBox**:
```razor
basicNavItems =
[
new()
{
Text = "Home",
IconName = BitIconName.Home,
Url = "HomePage",
},
new()
{
Text = "AdminPanel",
IconName = BitIconName.Admin,
ChildItems =
[
new() {
Text = "Dashboard",
IconName = BitIconName.BarChartVerticalFill,
Url = "DashboardPage",
},
new() {
Text = "Categories",
IconName = BitIconName.BuildQueue,
Url = "CategoriesPage",
},
new() {
Text = "Products",
IconName = BitIconName.Product,
Url = "ProductsPage",
}
]
},
new()
{
Text = "Todo",
IconName = BitIconName.ToDoLogoOutline,
Url = "TodoPage",
},
new()
{
Text = "Settings",
IconName = BitIconName.Equalizer,
Url = "SettingsPage"
},
new()
{
Text = "Terms",
IconName = BitIconName.EntityExtraction,
Url = "TermsPage",
}
];
```
\n**EmptyListMessage**:
```razor
basicNavItems =
[
new()
{
Text = "Home",
IconName = BitIconName.Home,
Url = "HomePage",
},
new()
{
Text = "AdminPanel",
IconName = BitIconName.Admin,
ChildItems =
[
new() {
Text = "Dashboard",
IconName = BitIconName.BarChartVerticalFill,
Url = "DashboardPage",
},
new() {
Text = "Categories",
IconName = BitIconName.BuildQueue,
Url = "CategoriesPage",
},
new() {
Text = "Products",
IconName = BitIconName.Product,
Url = "ProductsPage",
}
]
},
new()
{
Text = "Todo",
IconName = BitIconName.ToDoLogoOutline,
Url = "TodoPage",
},
new()
{
Text = "Settings",
IconName = BitIconName.Equalizer,
Url = "SettingsPage"
},
new()
{
Text = "Terms",
IconName = BitIconName.EntityExtraction,
Url = "TermsPage",
}
];
```
\n**Templates**:
```razor
NavPanel header
@item.Text
@item.Data
}
```
```csharp
private bool templateIsOpen;
private List templateNavItems =
[
new()
{
Text = "Home",
IconName = BitIconName.Home,
Url = "HomePage",
Data = 13,
},
new()
{
Text = "AdminPanel",
IconName = BitIconName.Admin,
ChildItems =
[
new() {
Text = "Dashboard",
IconName = BitIconName.BarChartVerticalFill,
Url = "DashboardPage",
Data = 63,
},
new() {
Text = "Categories",
IconName = BitIconName.BuildQueue,
Url = "CategoriesPage",
},
new() {
Text = "Products",
IconName = BitIconName.Product,
Url = "ProductsPage",
}
]
},
new()
{
Text = "Todo",
IconName = BitIconName.ToDoLogoOutline,
Url = "TodoPage",
},
new()
{
Text = "Settings",
IconName = BitIconName.Equalizer,
Url = "SettingsPage",
Data = 85,
},
new()
{
Text = "Terms",
IconName = BitIconName.EntityExtraction,
Url = "TermsPage",
}
];
```
\n**Events**:
```razor
eventNavItems =
[
new()
{
Text = "Home",
IconName = BitIconName.Home,
},
new()
{
Text = "AdminPanel",
IconName = BitIconName.Admin,
ChildItems =
[
new() {
Text = "Dashboard",
IconName = BitIconName.BarChartVerticalFill,
},
new() {
Text = "Categories",
IconName = BitIconName.BuildQueue,
},
new() {
Text = "Products",
IconName = BitIconName.Product,
}
]
},
new()
{
Text = "Todo",
IconName = BitIconName.ToDoLogoOutline,
},
new()
{
Text = "Settings",
IconName = BitIconName.Equalizer,
},
new()
{
Text = "Terms",
IconName = BitIconName.EntityExtraction,
}
];
```
\n**Public APIs**:
```razor
Toggle
navPanelRef = default!;
private List basicNavItems =
[
new()
{
Text = "Home",
IconName = BitIconName.Home,
Url = "HomePage",
},
new()
{
Text = "AdminPanel",
IconName = BitIconName.Admin,
ChildItems =
[
new() {
Text = "Dashboard",
IconName = BitIconName.BarChartVerticalFill,
Url = "DashboardPage",
},
new() {
Text = "Categories",
IconName = BitIconName.BuildQueue,
Url = "CategoriesPage",
},
new() {
Text = "Products",
IconName = BitIconName.Product,
Url = "ProductsPage",
}
]
},
new()
{
Text = "Todo",
IconName = BitIconName.ToDoLogoOutline,
Url = "TodoPage",
},
new()
{
Text = "Settings",
IconName = BitIconName.Equalizer,
Url = "SettingsPage"
},
new()
{
Text = "Terms",
IconName = BitIconName.EntityExtraction,
Url = "TermsPage",
}
];
```
\n**Color**:
```razor
colorNavItems =
[
new()
{
Text = "Home",
IconName = BitIconName.Home,
Url = "HomePage",
},
new()
{
Text = "AdminPanel",
IconName = BitIconName.Admin,
ChildItems =
[
new() {
Text = "Dashboard",
IconName = BitIconName.BarChartVerticalFill,
Url = "DashboardPage",
},
new() {
Text = "Categories",
IconName = BitIconName.BuildQueue,
Url = "CategoriesPage",
},
new() {
Text = "Products",
IconName = BitIconName.Product,
Url = "ProductsPage",
}
]
},
new()
{
Text = "Todo",
IconName = BitIconName.ToDoLogoOutline,
Url = "TodoPage",
},
new()
{
Text = "Settings",
IconName = BitIconName.Equalizer,
Url = "SettingsPage"
},
new()
{
Text = "Terms",
IconName = BitIconName.EntityExtraction,
Url = "TermsPage",
}
];
```
\n**Style & Class**:
```razor
basicNavItems =
[
new()
{
Text = "Home",
IconName = BitIconName.Home,
Url = "HomePage",
},
new()
{
Text = "AdminPanel",
IconName = BitIconName.Admin,
ChildItems =
[
new() {
Text = "Dashboard",
IconName = BitIconName.BarChartVerticalFill,
Url = "DashboardPage",
},
new() {
Text = "Categories",
IconName = BitIconName.BuildQueue,
Url = "CategoriesPage",
},
new() {
Text = "Products",
IconName = BitIconName.Product,
Url = "ProductsPage",
}
]
},
new()
{
Text = "Todo",
IconName = BitIconName.ToDoLogoOutline,
Url = "TodoPage",
},
new()
{
Text = "Settings",
IconName = BitIconName.Equalizer,
Url = "SettingsPage"
},
new()
{
Text = "Terms",
IconName = BitIconName.EntityExtraction,
Url = "TermsPage",
}
];
```
\n**RTL**:
```razor
rtlNavItems =
[
new()
{
Text = "خانه",
IconName = BitIconName.Home,
Url = "HomePage",
},
new()
{
Text = "ادمین پنل",
IconName = BitIconName.Admin,
ChildItems =
[
new() {
Text = "داشبورد",
IconName = BitIconName.BarChartVerticalFill,
Url = "DashboardPage",
},
new() {
Text = "دستهها",
IconName = BitIconName.BuildQueue,
Url = "CategoriesPage",
},
new() {
Text = "کالاها",
IconName = BitIconName.Product,
Url = "ProductsPage",
}
]
},
new()
{
Text = "وظایف",
IconName = BitIconName.ToDoLogoOutline,
Url = "TodoPage",
},
new()
{
Text = "تنظیمات",
IconName = BitIconName.Equalizer,
Url = "SettingsPage"
},
new()
{
Text = "قوانین",
IconName = BitIconName.EntityExtraction,
Url = "TermsPage",
}
];
```
Clicked item: @onItemClick?.Text
Toggled item: @onItemToggle?.Text
Toggled item: @onItemToggle?.Text