NavBar
NavMenu
TabPanel
NavMenu
TabPanel
A tab panel that provides navigation links to the main areas of an app.
Notes
The BitNavBar is a Multi-API component which can accept the list of Items in 3 different ways: BitNavBarItem class, a custom Generic class, and BitNavBarOption component.Usage
Basic
Disabled
Disabled:
Disabled item:
Manual Mode
Defines the mode in which the selected item is handled manually, instead of automatically using the current url.
IconOnly
Only renders the icon of each navbar item.
FitWidth
Enables fit-content width for the nav bar that sets the width of the component based on its content size.
Templates
Explore BitNavBar's customization capabilities.
ItemTemplate:
Item's template:
Events
Managing NavBar item click event (OnItemClick).
Clicked item:
Binding
This example demonstrates different ways to handle item selection and changes within the component.
DefaultSelectedItem:
Selected item: Home
Two-way SelectedItem:
Reselectable
Enables the ability to trigger select event even when the same item is selected again.
Item click count: 0
Advanced
An illustrative example of integrating this component into a straightforward mobile application.
bit BlazorUI
Products
Color
Offering a range of specialized colors, providing visual cues for specific states within your application.
Primary:
Secondary:
Tertiary:
Info:
Success:
Warning:
SevereWarning:
Error:
PrimaryBackground:
SecondaryBackground:
TertiaryBackground:
PrimaryForeground:
SecondaryForeground:
TertiaryForeground:
PrimaryBorder:
SecondaryBorder:
TertiaryBorder:
Style & Class
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
Component's Style:
Component's Class:
Item's style & class:
Styles:
Classes:
RTL
Use BitNavBar in right-to-left (RTL).
API
BitNavBar 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. |
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. |
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. |
IconName | BitNameSelectorPair<TItem, string?> | new(nameof(BitNavBarItem.IconName)) | The IconName field name and selector of the custom input class. |
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. |
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. |
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. |
- On this page