NavBar - bit BlazorUI

NavBar

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:
1. The
BitNavBarItem
class
2. A
Custom Generic
class
3. The
BitNavBarOption
component

Usage

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	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.
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.

BitComponentBase 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.

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.
IconName	string?	null	Name of an icon to render next to the navbar item.
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.
IconName	string?	null	Name of an icon to render next to the navbar option.
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.
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.

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.

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