Navs

NavBar

Bit.BlazorUINavMenuTabPanelBottomNavigationTabBarNavigationRail

A bar of navigation links to the main areas of an app - the bottom navigation of a mobile app, or a navigation rail down its side.

ForceAnimation (whole page)

Notes

Each item is an icon over its text, and a link when it has a URL. In the default Automatic mode the current URL selects the item; in Manual mode clicks and the two-way SelectedItem (or SelectedKey) do. The items are a list inside a nav landmark, the selected one carries aria-current, and the arrow keys, Home and End move the focus along the bar.

BitNavBar is a Multi-API component that takes its items as:
1. The BitNavBarItem class
2. A Custom Generic class
3. The BitNavBarOption component

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

Each item is an icon over its text, and a link when it has a Url. In the default Automatic mode the item whose URL matches the current page is selected and marked aria-current="page". The bar is a nav landmark: name it with AriaLabel, since a page rarely holds only one.

Disabled

Disabled disables the whole navbar and IsDisabled a single item. A disabled item loses its link and its tab stop, and is announced as dimmed.

Disabled navbar:

Disabled item:

Manual Mode

In the Manual mode clicks select the items instead of the URL, for a navbar that switches panels of one page. DefaultSelectedItem sets the starting item; SelectedItem (or the item's Key as SelectedKey) binds both ways, so the selection can be read and written from outside the navbar.

DefaultSelectedItem:

Two-way bound SelectedItem:

Selected item:

Home

Products

Academy

Profile

URL Matching

Match (per navbar, or per item) compares URLs Exactly (the default), by Prefix, as a Wildcard pattern (?, * within a segment, ** across segments) or as a Regex. Exact and Prefix ignore case and a trailing slash. AdditionalUrls gives an item more URLs to match. All of these are matched against the URL of this page.

Exact (the default):

Prefix:

Wildcard:

Regex:

AdditionalUrls:

Labels

IconOnly hides every label, HideUnselectedText keeps only the selected one's, and InlineText puts the label beside the icon. A hidden label still names its item for screen readers.

IconOnly:

HideUnselectedText:

InlineText:

Width & Alignment

FitWidth shrinks the navbar to its content and FullWidth stretches it over its container. Justified gives every item an equal share, and Alignment packs or spreads the items along the bar.

FitWidth:

FullWidth:

Justified (labels of unequal length):

Alignment Center:

Alignment SpaceBetween:

Selection

SelectedIconName (or SelectedIcon) swaps the selected item to a filled glyph. Filled fills the hovered and selected item with the Color, and Indicator adds a Line along its edge or a Pill behind its icon - cues beyond color alone. FlipIndicator moves the line to the top edge, the one a bottom bar turns toward the content.

SelectedIconName:

Filled:

Line indicator:

Line indicator, FlipIndicator:

Pill indicator:

Pill indicator, Filled:

Scrollable

Scrollable scrolls the items instead of squeezing them (scrollbar hidden) and brings the selected item into view whenever the selection moves - here from the button.

Selected item:

Header & Footer

HeaderTemplate and FooterTemplate render content before and after the items, outside their list, so a screen reader does not count it among the destinations.

Vertical

Vertical turns the navbar into a navigation rail (usually with FitWidth). Everything above applies: the Line runs down the leading edge and Scrollable scrolls down the rail.

Basic:

InlineText and Line indicator:

IconOnly, centered, with header and footer:

Scrollable:

Badge

Badge puts a count on the icon and Dot marks it without one. The badge is folded into the item's name ("Inbox (12)"); BadgeAriaLabel replaces that text, and is the only way a dot is announced.

Templates

ItemTemplate replaces the content of every item and an item's Template its own. With a TemplateRenderMode (or ItemTemplateRenderMode) of Replace the template replaces the whole item, for an item that is a control of its own; it then owns its clicks, focus and name.

ItemTemplate:

Item's template:

Replaced item template:

Events

OnItemClick fires on a click and OnSelectItem when the selection moves. Both skip the already selected item unless Reselectable is set - for a bar that scrolls its page to the top on a second tap.

Reselectable

Clicked item: (0 clicks)

Selected item: (0 selections)

Keyboard

The arrow keys, Home and End move the focus (flipped in RTL, skipping disabled items). By default every item is a tab stop; SingleTabStop makes the bar one stop like a toolbar. WrapNavigation wraps at the ends, and SelectOnFocus moves the selection with the focus (Manual mode).

SingleTabStop:

WrapNavigation:

SelectOnFocus:

Dynamic Items

Items is re-read on every render, so changes to the same list show up at once; the selection survives while its item is still there.

Selected item:

Cascading parameters

BitParams hands a BitNavBarParams to every navbar under it as defaults: a navbar keeps what it sets itself and takes only what it left unset. The object is not generic, so it serves all three item APIs.

Everything from the cascade:

Its own Indicator, the cascaded rest:

Outside the cascade:

Color

Color paints the selected item, its indicator and its fill.

Primary:

Secondary:

Tertiary:

Info:

Success:

Warning:

SevereWarning:

Error:

PrimaryBackground:

SecondaryBackground:

TertiaryBackground:

PrimaryForeground:

SecondaryForeground:

TertiaryForeground:

PrimaryBorder:

SecondaryBorder:

TertiaryBorder:

External Icons

External icon libraries like FontAwesome can be used with the Icon parameter.

Size

Size scales the icon, the text, the padding and the touch target of every item.

Small:

Medium:

Large:

Style & Class

Style/Class for the root, Styles/Classes for its parts, an item's own Style/Class, and the public --bit-NavBar-* CSS variables, which re-skin every navbar when set on :root or a class.

Component's Style:

Component's Class:

Item's Style & Class:

Styles:

Classes:

CSS variables (a floating tab bar):

CSS variables (a short line indicator):

RTL

Use BitNavBar in right-to-left (RTL).

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle that one alone. Leave a variable unset and the component falls back to the theme token beside it.

BitNavBar CSS variables

Name	Default value	Description
--bit-NavBar-background	transparent	Fill of the bar.
--bit-NavBar-border-radius	0	Corners of the bar, for a floating tab bar.
--bit-NavBar-shadow	none	Shadow of the bar.
--bit-NavBar-padding-block	0	Room above and below the items (SafeArea adds the device inset below it).
--bit-NavBar-padding-inline	0	Room on the two sides of the items.
--bit-NavBar-gap	0	Space between the items.
--bit-NavBar-item-color	--bit-clr-fg-pri	Content color of an item.
--bit-NavBar-item-hover-color	The Color kind (its on-color when Filled)	Content color of a hovered item.
--bit-NavBar-item-hover-background	The Color kind's hover when Filled, else transparent	Fill of a hovered item, or of its pill with the Pill indicator.
--bit-NavBar-item-border-radius	--bit-shp-radius-control	Corners of an item.
--bit-NavBar-item-padding	Per Size	Padding of an item, one length on every side (the room a hidden label reserves is worked out from it).
--bit-NavBar-item-min-size	Per Size (--bit-siz-ctrl-*)	Minimum width and height of an item, its touch target.
--bit-NavBar-icon-size	Per Size	Size of the icon of an item.
--bit-NavBar-text-size	Per Size	Font size of the text of an item.
--bit-NavBar-selected-color	The Color kind (its on-color when Filled)	Content color of the selected item.
--bit-NavBar-selected-background	The Color kind's active when Filled, else transparent	Fill of the selected item, or of its pill with the Pill indicator.
--bit-NavBar-selected-font-weight	--bit-tpg-fw-semibold	Font weight of the selected item.
--bit-NavBar-indicator-color	The Color kind (its on-color when Filled)	Color of the Line indicator.
--bit-NavBar-indicator-thickness	--bit-siz-tab-indicator	Thickness of the Line indicator.
--bit-NavBar-indicator-inset	0	Inset of the Line indicator from both ends of the item, for a line shorter than the item.
--bit-NavBar-badge-color	--bit-clr-err-text	Text color of a badge.
--bit-NavBar-badge-background	--bit-clr-err	Fill of a badge and a dot.
--bit-NavBar-disabled-color	The Color kind's disabled text	Content color of a disabled item.
--bit-NavBar-focus-color	The Color kind's focus	Color of the focus ring of an item.

API

Every parameter, public member, sub-class and enum this component exposes.

BitNavBar parameters

Name	Type	Default value	Description
Alignment	BitAlignment?	null	How the items are distributed along the navbar. Unset, a bar spreads its items evenly and a vertical rail packs them at its top; Baseline and Stretch keep that default.
AutoReorderOptions	bool	false	Keeps the order of the options (what the keyboard walks) in sync with their markup order when options are added, removed or reordered after the first render. Opt-in, since it reads the DOM order back after each change.
ChildContent	RenderFragment?	null	Items to render as children.
Classes	BitNavBarClassStyles?	null	Custom CSS classes for different parts of the navbar.
Color	BitColor?	null	The general color of the navbar, used for the icon, the text and the indicator of the selected item.
DefaultSelectedItem	TItem?	null	The initially selected item in manual mode. Ignored while SelectedItem or SelectedKey is bound.
DefaultSelectedKey	string?	null	The Key of the initially selected item in manual mode, applied as soon as an item with that key is there. It is how the options API sets a default selection. DefaultSelectedItem wins when both are set, and both are ignored while SelectedItem or SelectedKey is bound.
Filled	bool	false	Fills the hovered and the selected item with the Color of the navbar, moving their content onto its on-color.
FitWidth	bool	false	Renders the nav bar in a width to only fit its content.
FlipIndicator	bool	false	Draws the Line indicator on the opposite edge: the top edge of a bar (the one a bottom bar turns toward the content) and the trailing edge of a Vertical rail.
FooterTemplate	RenderFragment?	null	Content rendered after the items, outside their list: trailing actions of a bar, or the bottom button of a rail.
FullWidth	bool	false	Renders the nav bar in full width of its container element.
HeaderTemplate	RenderFragment?	null	Content rendered before the items, outside their list: a logo or a menu button, or the top button of a rail.
HideUnselectedText	bool	false	Only renders the text of the selected item; the others keep their icon, and their text as their accessible name. Ignored while IconOnly is enabled.
IconOnly	bool	false	Only renders the icon of each item; the text becomes its accessible name and tooltip.
Indicator	BitNavBarIndicator?	null	The mark of the selected item beside its color: a Line along its edge or a Pill behind its icon.
InlineText	bool	false	Renders the icon and the text of each item side by side instead of stacking the text under the icon.
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.
ItemTemplateRenderMode	BitNavItemTemplateRenderMode	BitNavItemTemplateRenderMode.Normal	Whether the ItemTemplate renders inside the anchor (or button) of each item, or replaces it for items that are controls of their own. Replaced items own their clicks, focus and accessible name, and are left out of the keyboard navigation.
Justified	bool	false	Gives every item an equal share of the navbar instead of the width of its own content.
Match	BitNavMatch?	null	Modifies how the URL of an item is matched against the current URL in the automatic mode. The Match of an item takes precedence over this value, and the default is an exact match.
Mode	BitNavMode	BitNavMode.Automatic	Determines how the navigation will be handled.
NameSelectors	BitNavBarNameSelectors<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	Lets the click and select events of the already selected item through, on a click in the Manual mode and on a navigation back to its URL in the Automatic mode.
SafeArea	bool	false	Reserves the bottom safe-area inset of the device (a phone's home indicator) under the items, so a bar pinned to the bottom of the screen is not overlapped by it.
Scrollable	bool	false	Scrolls the items along the navbar instead of squeezing them, with the scrollbar hidden and a mouse wheel scrolling a horizontal bar sideways, and keeps the selected item in view as the selection moves.
SelectedItem	TItem?	null	Selected item to show in the navbar. Supports two-way binding.
SelectedKey	string?	null	The Key of the selected item, kept in step with SelectedItem. It is how the options API binds its selection; a key no item carries yet is applied once one with it is there. Bound one way, it holds the selection as a one-way SelectedItem does. Automatic mode only reports it. Supports two-way binding.
SelectOnFocus	bool	false	Selects an item as soon as the focus reaches it, like the tabs of a tab list. Manual mode only.
SingleTabStop	bool	false	Makes the navbar a single tab stop (the last focused item, else the selected one, else the first) with the arrow keys moving inside it, like a toolbar. By default every item is a tab stop.
Size	BitSize?	null	The size of the navbar.
Styles	BitNavBarClassStyles?	null	Custom CSS styles for different parts of the navbar.
Vertical	bool	false	Stacks the items of the navbar in a column, which turns it into a vertical navigation rail.
WrapNavigation	bool	false	Lets the arrow keys wrap around from the last item to the first one and back. By default the focus stops at the ends.

BitNavBar public members

Name	Type	Description
FocusItem	Func<TItem, ValueTask>	Moves the focus to an item of the navbar.
ScrollItemIntoView	Func<TItem, ValueTask>	Brings an item into the visible area of a Scrollable navbar without selecting or focusing it.
SelectItem	Func<TItem?, Task>	Selects an item programmatically, exactly like a click on that item would in the manual mode.

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.
Disabled	bool	false	Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction.
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.
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
AdditionalUrls	IEnumerable<string>?	null	Alternative URLs to be considered when auto mode tries to detect the selected navbar item by the current URL.
AriaCurrent	BitNavAriaCurrent	BitNavAriaCurrent.Page	The value of the aria-current attribute of the navbar item when it is the selected one.
AriaLabel	string?	null	The accessible label of the navbar item, announced instead of its content. When it is not provided and the text of the item is not rendered (in the IconOnly or the HideUnselectedText modes), the text of the item is used, so an icon is never left unnamed.
Badge	string?	null	The badge text to render on the icon of the navbar item, for a count or a short status. Takes precedence over Dot when both are set.
BadgeAriaLabel	string?	null	The accessible description of the badge (or the dot) of the navbar item, folded into the accessible name of the item so a count that only exists as a colored bubble is not lost on a screen reader. It falls back to the Badge text, and a Dot is only announced while this is set.
Class	string?	null	Custom CSS class for the navbar item.
Data	object?	null	The custom data for the navbar item to provide additional state.
Dot	bool	false	Renders a small dot on the icon of the navbar item, to mark it as needing attention without showing a number. Ignored while Badge is set.
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.
IsDisabled	bool	false	Whether or not the navbar item is disabled.
Key	string?	null	A unique value to use as a key or id of the navbar item, and what the DefaultSelectedKey of the navbar matches.
Match	BitNavMatch?	null	Modifies how the URL of the navbar item is matched against the current URL in the automatic mode. Takes precedence over the Match of the navbar itself.
SelectedIcon	BitIconInfo?	null	The icon to display while the navbar item is the selected one, using custom CSS classes for external icon libraries. Takes precedence over SelectedIconName when both are set, and falls back to Icon / IconName while neither is set.
SelectedIconName	string?	null	The name of the icon to display from the built-in Fluent UI icons while the navbar item is the selected one, which is how a navigation bar marks its current destination with the filled variant of the same glyph.
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.
TemplateRenderMode	BitNavItemTemplateRenderMode	BitNavItemTemplateRenderMode.Normal	Whether the Template of the navbar item is rendered inside the anchor (or the button) the item is, or replaces it altogether, which is what an item that is a control of its own needs, since an interactive element cannot be nested in another one. A replaced item is left out of the keyboard navigation of the navbar.
Text	string?	null	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.

BitNavBarOption properties

Name	Type	Default value	Description
AdditionalUrls	IEnumerable<string>?	null	Alternative URLs to be considered when auto mode tries to detect the selected navbar option by the current URL.
AriaCurrent	BitNavAriaCurrent	BitNavAriaCurrent.Page	The value of the aria-current attribute of the navbar option when it is the selected one.
AriaLabel	string?	null	The accessible label of the navbar option, announced instead of its content. When it is not provided and the text of the option is not rendered (in the IconOnly or the HideUnselectedText modes), the text of the option is used, so an icon is never left unnamed.
Badge	string?	null	The badge text to render on the icon of the navbar option, for a count or a short status. Takes precedence over Dot when both are set.
BadgeAriaLabel	string?	null	The accessible description of the badge (or the dot) of the navbar option, folded into the accessible name of the option so a count that only exists as a colored bubble is not lost on a screen reader. It falls back to the Badge text, and a Dot is only announced while this is set.
Class	string?	null	Custom CSS class for the navbar option.
Data	object?	null	The custom data for the navbar option to provide additional state.
Dot	bool	false	Renders a small dot on the icon of the navbar option, to mark it as needing attention without showing a number. Ignored while Badge is set.
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.
IsDisabled	bool	false	Whether or not the navbar option is disabled.
Key	string?	null	A unique value to use as a key or id of the navbar option, and what the DefaultSelectedKey of the navbar matches.
Match	BitNavMatch?	null	Modifies how the URL of the navbar option is matched against the current URL in the automatic mode. Takes precedence over the Match of the navbar itself.
SelectedIcon	BitIconInfo?	null	The icon to display while the navbar option is the selected one, using custom CSS classes for external icon libraries. Takes precedence over SelectedIconName when both are set, and falls back to Icon / IconName while neither is set.
SelectedIconName	string?	null	The name of the icon to display from the built-in Fluent UI icons while the navbar option is the selected one, which is how a navigation bar marks its current destination with the filled variant of the same glyph.
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.
TemplateRenderMode	BitNavItemTemplateRenderMode	BitNavItemTemplateRenderMode.Normal	Whether the Template of the navbar option is rendered inside the anchor (or the button) the option is, or replaces it altogether, which is what an option that is a control of its own needs, since an interactive element cannot be nested in another one. A replaced option is left out of the keyboard navigation of the navbar.
Text	string?	null	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.

BitNavBarNameSelectors<TItem> properties

Name	Type	Default value	Description
AdditionalUrls	BitNameSelectorPair<TItem, IEnumerable<string>?>	new(nameof(BitNavBarItem.AdditionalUrls))	The AdditionalUrls field name and selector of the custom input class.
AriaCurrent	BitNameSelectorPair<TItem, BitNavAriaCurrent?>	new(nameof(BitNavBarItem.AriaCurrent))	The AriaCurrent field name and selector of the custom input class.
AriaLabel	BitNameSelectorPair<TItem, string?>	new(nameof(BitNavBarItem.AriaLabel))	The AriaLabel field name and selector of the custom input class.
Badge	BitNameSelectorPair<TItem, string?>	new(nameof(BitNavBarItem.Badge))	The Badge field name and selector of the custom input class.
BadgeAriaLabel	BitNameSelectorPair<TItem, string?>	new(nameof(BitNavBarItem.BadgeAriaLabel))	The BadgeAriaLabel field name and selector of the custom input class.
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.
Dot	BitNameSelectorPair<TItem, bool?>	new(nameof(BitNavBarItem.Dot))	The Dot 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.
IsDisabled	BitNameSelectorPair<TItem, bool?>	new(nameof(BitNavBarItem.IsDisabled))	The IsDisabled 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.
Match	BitNameSelectorPair<TItem, BitNavMatch?>	new(nameof(BitNavBarItem.Match))	The Match field name and selector of the custom input class.
SelectedIcon	BitNameSelectorPair<TItem, BitIconInfo?>	new(nameof(BitNavBarItem.SelectedIcon))	The SelectedIcon field name and selector of the custom input class. Maps to SelectedIcon for external icon libraries.
SelectedIconName	BitNameSelectorPair<TItem, string?>	new(nameof(BitNavBarItem.SelectedIconName))	The SelectedIconName field name and selector of the custom input class. Maps to SelectedIconName for built-in Fluent UI icons.
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.
TemplateRenderMode	BitNameSelectorPair<TItem, BitNavItemTemplateRenderMode?>	new(nameof(BitNavBarItem.TemplateRenderMode))	The TemplateRenderMode 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.

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.
Footer	string?	null	Custom CSS classes/styles for the footer of the BitNavBar, rendered after the items.
Header	string?	null	Custom CSS classes/styles for the header of the BitNavBar, rendered before the items.
Item	string?	null	Custom CSS classes/styles for the item of the BitNavBar.
ItemBadge	string?	null	Custom CSS classes/styles for the badge (or the dot) of the item of the BitNavBar.
ItemIcon	string?	null	Custom CSS classes/styles for the item icon of the BitNavBar.
ItemIconContainer	string?	null	Custom CSS classes/styles for the wrapper of the icon and the badge of the item of the BitNavBar.
ItemText	string?	null	Custom CSS classes/styles for the item text of the BitNavBar.
ItemWrapper	string?	null	Custom CSS classes/styles for the list item wrapping each item 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 navbar follows the browser: it selects the item whose URL points at the page the app currently sits on, and it re-selects on every navigation.
Manual	1	The selection is driven by clicks and by the SelectedItem binding instead of by the current URL, which is what a navbar that switches between the panels of a single page needs.

BitNavMatch enum

Name	Value	Description
Exact	0	Specifies that the item should be active when it matches exactly the current URL.
Prefix	1	Specifies that the item should be active when it matches any prefix of the current URL.
Regex	2	Specifies that the item should be active when its provided regex matches the current URL.
Wildcard	3	Specifies that the item should be active when its provided wildcard matches the current URL.

BitNavAriaCurrent enum

Name	Value	Description
Page	0	Represents the current page within a set of pages.
Step	1	Represents the current step within a process.
Location	2	Represents the current location within an environment or context.
Date	3	Represents the current date within a collection of dates.
Time	4	Represents the current time within a set of times.
True	5	Represents the current item within a set.

BitNavItemTemplateRenderMode enum

Name	Value	Description
Normal	0	Renders the template inside the anchor (or the button) the item is, so the item keeps its click, its focus and its place in the keyboard navigation of the navbar.
Replace	1	Replaces the anchor (or the button) the item is with the template, which is what an item that is a control of its own needs. The template owns its clicks, its focus and its accessible name, and the item is left out of the keyboard navigation of the navbar.

BitNavBarIndicator enum

Name	Value	Description
None	0	No indicator of its own: the selection is conveyed by the color of the item and, while Filled is enabled, by the fill of the item.
Line	1	A line drawn along the edge of the selected item: its bottom edge in a horizontal navbar and its leading edge in a vertical rail (the opposite ones with FlipIndicator), the way a tab strip marks its current tab.
Pill	2	A pill drawn behind the icon of the selected item, which is how a Material navigation bar marks its current destination. It takes the fill off the item itself, so the pill is the only filled part.

BitAlignment enum

Name	Value	Description
Start	0	Packs the items at the start of the navbar.
End	1	Packs the items at the end of the navbar.
Center	2	Packs the items in the center of the navbar.
SpaceBetween	3	Spreads the items over the navbar, leaving no space before the first one and after the last one.
SpaceAround	4	Spreads the items over the navbar with equal space around each of them, which is what a horizontal navbar does on its own.
SpaceEvenly	5	Spreads the items over the navbar with equal space between them and at both of its ends.
Baseline	6	Carries no distribution of its own here, so the navbar keeps its default.
Stretch	7	Carries no distribution of its own here, so the navbar keeps its default. Use Justified to have the items fill the navbar.

BitSize enum

Name	Value	Description
Small	0	The small size.
Medium	1	The medium size.
Large	2	The large size.

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

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.

Open an issue

Start a discussion

Edit this page

View the component source

Edit the component