Navs
Nav
Bit.BlazorUITreeTreeView
A navigation pane (Nav) provides links to the main areas of an app or site, and can also be used as a TreeView to show parent-child data in a tree. It renders a hierarchy of any depth, keeps its selection in sync with the current URL (exact, prefix, wildcard or regex) or leaves it to the app, groups items under headers, shrinks to a rail of icons, and is fully operable from the keyboard with the tree-view keys.
Notes
The BitNav is a Multi-API component
which can accept the list of Items in 3 different ways:
1. The BitNavItem class
2. A Custom Generic class
3. The BitNavOption component
1. The BitNavItem class
2. A Custom Generic class
3. The BitNavOption component
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Item
Custom
Option
Basic
The nav renders the tree given to Items. A BitNavItem carries its Text, IconName,
Description and Url; ChildItems make it expandable, and IsDisabled set to true
disables it.
FitWidth & FullWidth
By default the nav takes the width of its container. FitWidth shrinks it to its widest item, and
FullWidth stretches it over the whole container.
FitWidth
FullWidth
Grouped & Separator
The Grouped render type turns the root items into group headers that expand and collapse their group
instead of navigating. An item with IsSeparator draws a rule instead, grouping the items around it
without a header; the keyboard skips it.
Grouped
Separator
Manual Mode
The default Automatic mode selects the item that matches the current URL. The Manual mode leaves
the selection to the app: a click selects, DefaultSelectedItem sets the initial item and
@bind-SelectedItem keeps it in sync.
Basic
Two-Way Bind
French Fries
IconOnly
IconOnly reduces the nav to a rail of icons. The text of each item stays available as its tooltip and as
its accessible name.
Expand & Collapse
SingleExpand keeps a single branch open at a time, like an accordion (ExpandAll does nothing in
this mode). AllExpanded opens every branch on the first render. NoCollapse keeps every branch open
and removes the chevrons with the space they reserve; a Grouped header then becomes a plain label.
SingleExpand
NoCollapse
Chevron & Indentation
ReversedChevron moves the chevron to the end of the item, and ChevronDownIconName (or
ChevronDownIcon for an external library) replaces its icon. IndentValue is the padding added per
level, IndentPadding the width of the chevron, which a childless item keeps in its place, and
IndentReversedPadding replaces it while the chevron is reversed.
ReversedChevron
Custom chevron icon
IndentValue & IndentPadding
Custom Templates
ItemTemplate and HeaderTemplate (Grouped) render the content of every item and group header. Their
ItemTemplateRenderMode / HeaderTemplateRenderMode render the template inside the item's own link
(Normal) or in its place (Replace), and the Template of a single item overrides both.
A Normal template sits inside a link or a button, so keep controls (a checkbox, a button) out of it.
Header Template (Grouped)
Item Template
Item Template (Replace)
Public API
A reference to the nav drives it: ExpandAll / CollapseAll (the whole tree or one subtree),
ExpandItem, CollapseItem, ToggleItem, IsItemExpanded, SelectItem, and
FocusItem, which opens the path to an item before focusing it.
Events
OnItemClick fires on every click, OnSelectItem when the selection changes, and OnItemToggle
when a branch opens or closes. Reselectable fires the select events again for the item that is already
selected.
Clicked Item:
Selected Item:
Toggled Item: N/A
Selected Item:
Toggled Item: N/A
URL Matching
In the Automatic mode the item whose URL matches the current page is selected. Match sets the rule
for the whole nav, and the Match of an item overrides it: Exact, Prefix, Wildcard
(? is one character but /, * any run of them, ** anything) or Regex. The query
string is ignored, and Exact and Prefix also ignore the letter case and a trailing slash.
AdditionalUrls gives an item more URLs to light up on. The navs below match the URL of this page.
Exact (the default)
Prefix
Wildcard
Regex
Match of an item & AdditionalUrls
Accessibility
The nav is a nav landmark: name it with AriaLabel when a page has more than one. The selected item
carries aria-current (its AriaCurrent picks the value), a Description is announced as the
item's description, and a parent reports aria-expanded. A parent without a URL toggles on a click anywhere
on it; a parent with one navigates, so its chevron becomes a button of its own, named by
ExpandAriaLabel / CollapseAriaLabel.
Keyboard: Tab moves between the items, ↑ ↓ Home End walk the visible ones, → opens a branch and then steps into it, ← closes it and then steps out, * opens every sibling, and typing jumps to the next item starting with it. Collapse Navs: the branch that holds the current page takes the look of the selection, so the reader never loses it.
Keyboard: Tab moves between the items, ↑ ↓ Home End walk the visible ones, → opens a branch and then steps into it, ← closes it and then steps out, * opens every sibling, and typing jumps to the next item starting with it. Collapse Navs: the branch that holds the current page takes the look of the selection, so the reader never loses it.
Cascading parameters
BitParams hands a BitNavParams to every nav under it, as a default rather than an override: a nav
that sets a parameter itself keeps its own value. What the nav is generic over (the items, the selection, the
templates, the name selectors and the events) stays on each nav, so one cascade serves all three APIs.
All from the cascade
Its own IconOnly
Badges & Suffix
Badge marks an item with a count or a short status, and Dot marks it as needing attention without
a number. Both are drawn after the text while the item keeps its icon, its text and its states, and both are
folded into the item's accessible name, in the words of BadgeAriaLabel when the bare count would not say
enough (a dot is only announced with one). ItemSuffixTemplate, or the SuffixTemplate of a single
item, adds content of your own ahead of the badge without taking the item's own content over the way an
ItemTemplate does. The IconOnly nav keeps the badges alone, pinned to the icons.
Badge & Dot
ItemSuffixTemplate
IconOnly
Color
Color paints the icons and the bar of the selected item. Accent paints the hovered and the selected
item: a background, foreground or border role tints it, while a semantic role fills it and recolors what it holds.
Primary
Secondary
Tertiary
Info
Success
Warning
SevereWarning
Error
Accent:
Primary
Success
Warning
Error
External Icons
Icon takes the CSS classes of an external icon library (FontAwesome, Bootstrap Icons, ...) and wins over
IconName; ChevronDownIcon does the same for the chevron.
FontAwesome Icons:
Bootstrap Icons:
Size
Size scales the height, text, icon, chevron and description of the items, and the height and text of the group
headers.
Small
Medium
Large
Style & Class
Style and Class reach the root, the Style and Class of an item its list element, and
Styles and Classes each part of the nav. The public CSS variables re-skin it without a
selector; they inherit, so set them on an instance, on an ancestor or on :root. They restyle the default,
not a choice: an explicit Color, Accent or Size wins over the variables for what it sets.
Component's Style & Class:
Item's Style & Class:
Styles & Classes:
CSS variables:
RTL
Dir set to Rtl mirrors the nav, its indentation and the arrow keys: → steps out of a branch
and ← steps into it.
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 it - and any instance nested inside it, which inherits the value too; a parameter changes one alone,
as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps
one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or
font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component
falls back to the theme token beside it.
BitNav CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-Nav-color | --bit-clr-fg-pri | Text and chevron color of an item at rest. |
| --bit-Nav-icon-color | --bit-clr-pri | Icon color of an item at rest, and of a hovered, pressed or selected one its own variable leaves unset (and of one under an explicit surface Accent). The Color parameter wins over it. |
| --bit-Nav-description-color | --bit-clr-fg-ter | Description color of an item at rest, and of a hovered, pressed or selected one its own variable leaves unset (and of one under an explicit surface Accent). |
| --bit-Nav-disabled-color | --bit-clr-fg-dis | Text, icon, description and chevron color of a disabled item (or of every item of a disabled nav). |
| --bit-Nav-hover-background | --bit-clr-bg-pri-hover | Background of a hovered item (pointer devices only); the selected item, and a collapsed branch that holds it, takes --bit-Nav-selected-hover-background instead. The Accent parameter wins over it. |
| --bit-Nav-hover-color | --bit-clr-fg-pri | Text and chevron color of a hovered item; the selected item, and a collapsed branch that holds it, takes --bit-Nav-selected-hover-color instead. The Accent parameter wins over it. |
| --bit-Nav-hover-icon-color | --bit-Nav-icon-color, then --bit-clr-pri | Icon color of a hovered item (pointer devices only); the selected item, and a collapsed branch that holds it, takes --bit-Nav-selected-hover-icon-color instead. The Accent and Color parameters win over it. |
| --bit-Nav-hover-description-color | --bit-Nav-description-color, then --bit-clr-fg-ter | Description color of a hovered item (pointer devices only); the selected item, and a collapsed branch that holds it, takes --bit-Nav-selected-hover-description-color instead. The Accent parameter wins over it. |
| --bit-Nav-pressed-background | --bit-clr-bg-pri-active | Background of an item while it is pressed (the one feedback a tap gets on a touch screen); the selected item, and a collapsed branch that holds it, takes --bit-Nav-selected-pressed-background instead. The Accent parameter wins over it. |
| --bit-Nav-pressed-color | --bit-Nav-hover-color, then --bit-clr-fg-pri (on a touch screen --bit-clr-fg-pri) | Text and chevron color of an item while it is pressed; the selected item, and a collapsed branch that holds it, takes --bit-Nav-selected-hover-color instead. Where the pointer can hover it falls back on the hovered color; on a touch screen, where no hover applies, on the default. The Accent parameter wins over it. |
| --bit-Nav-pressed-icon-color | --bit-Nav-hover-icon-color, then --bit-Nav-icon-color, then --bit-clr-pri (on a touch screen --bit-Nav-icon-color, then --bit-clr-pri) | Icon color of an item while it is pressed; the selected item, and a collapsed branch that holds it, takes --bit-Nav-selected-hover-icon-color instead. Where the pointer can hover it falls back on the hovered icon color; on a touch screen, where no hover applies, on the one at rest. The Accent and Color parameters win over it. |
| --bit-Nav-pressed-description-color | --bit-Nav-hover-description-color, then --bit-Nav-description-color, then --bit-clr-fg-ter (on a touch screen --bit-Nav-description-color, then --bit-clr-fg-ter) | Description color of an item while it is pressed; the selected item, and a collapsed branch that holds it, takes --bit-Nav-selected-hover-description-color instead. Where the pointer can hover it falls back on the hovered description color; on a touch screen, where no hover applies, on the one at rest. The Accent parameter wins over it. |
| --bit-Nav-selected-background | --bit-clr-bg-pri-active | Background of the selected item, and of a collapsed branch that holds it. The Accent parameter wins over it. |
| --bit-Nav-selected-color | --bit-clr-fg-pri | Text and chevron color of the selected item, and of a collapsed branch that holds it. The Accent parameter wins over it. |
| --bit-Nav-selected-icon-color | --bit-Nav-icon-color, then --bit-clr-pri | Icon color of the selected item, and of a collapsed branch that holds it - the one to move with --bit-Nav-selected-background when that is a vivid fill. The Accent and Color parameters win over it: an explicit Accent draws the icon in its own colors on its own fill (a semantic one in its on-color, a surface one in the icon color at rest), so a value set for the theme's fill never lands on the Accent's. |
| --bit-Nav-selected-description-color | --bit-Nav-description-color, then --bit-clr-fg-ter | Description color of the selected item, and of a collapsed branch that holds it. The Accent parameter wins over it. |
| --bit-Nav-selected-hover-background | --bit-Nav-selected-background with 8% of --bit-Nav-selected-color mixed in | Background of the selected item, and of a collapsed branch that holds it, while it is hovered (pointer devices only). The selection gives its feedback on its own fill rather than taking the hovered one every other item gets, so the item just picked - which the pointer is still on right after the click - never looks unselected. Where the browser has no color-mix it keeps the selected background. The Accent parameter wins over it: an explicit Accent mixes its own on-color into its own selected fill. |
| --bit-Nav-selected-pressed-background | --bit-Nav-selected-hover-background with 8% of --bit-Nav-selected-hover-color mixed in | Background of the selected item, and of a collapsed branch that holds it, while it is pressed - on a touch screen too, where it is the one feedback a tap gets. Where the browser has no color-mix it falls back on --bit-Nav-selected-hover-background. The Accent parameter wins over it. |
| --bit-Nav-selected-hover-color | --bit-Nav-selected-color, then --bit-clr-fg-pri | Text and chevron color of the selected item, and of a collapsed branch that holds it (its group header included), while it is hovered or pressed - the one to move with --bit-Nav-selected-hover-background when the selected color does not read on that fill. The Accent parameter wins over it. |
| --bit-Nav-selected-hover-icon-color | --bit-Nav-selected-icon-color, then --bit-Nav-icon-color, then --bit-clr-pri | Icon color of the selected item, and of a collapsed branch that holds it, while it is hovered or pressed. The Accent and Color parameters win over it. |
| --bit-Nav-selected-hover-description-color | --bit-Nav-selected-description-color, then --bit-Nav-description-color, then --bit-clr-fg-ter | Description color of the selected item, and of a collapsed branch that holds it, while it is hovered or pressed. The Accent parameter wins over it. |
| --bit-Nav-indicator-color | --bit-clr-pri | Color of the leading bar of the selected item. The Color parameter wins over it. |
| --bit-Nav-indicator-width | --bit-shp-brd-width-thick | Thickness of the leading bar of the selected item; 0 removes it. In forced colors (Windows contrast themes) the bar is the one mark of the selection left, so there it is never thinner than --bit-shp-brd-width-thick. |
| --bit-Nav-item-radius | --bit-shp-radius-control | Corner radius of an item. |
| --bit-Nav-item-min-height | spacing(6) (48px) | Smallest height of an item. The Size parameter wins over it. |
| --bit-Nav-item-padding | 4px (spacing(0.5)) | Padding of an item; the indentation of the levels is added to its start. |
| --bit-Nav-item-gap | 0 | Room between two items, at every level. |
| --bit-Nav-font-size | --bit-tpg-fs-sm | Text size of an item. The Size parameter wins over it. |
| --bit-Nav-icon-size | --bit-siz-icon-md | Icon size of an item and of a group header. The Size parameter wins over it. |
| --bit-Nav-description-font-size | --bit-tpg-fs-xs | Text size of the description of an item. The Size parameter wins over it. |
| --bit-Nav-header-color | --bit-clr-fg-pri | Text color of a group header (Grouped render type). |
| --bit-Nav-header-font-size | --bit-tpg-fs-lg | Text size of a group header. The Size parameter wins over it. |
| --bit-Nav-header-min-height | spacing(5.5) (44px) | Smallest height of a group header; one with a description grows past it. The Size parameter wins over it. |
| --bit-Nav-header-border-color | --bit-clr-brd-pri | Color of the rule under a group header. |
| --bit-Nav-header-hover-background | --bit-clr-bg-pri-hover | Background of a hovered group header (pointer devices only); a collapsed one that holds the selected item takes --bit-Nav-selected-hover-background instead. |
| --bit-Nav-separator-color | --bit-clr-brd-sec | Color of a separator item. |
| --bit-Nav-badge-color | --bit-clr-err-text | Text color of the badge of an item; it keeps it in every state of the item. |
| --bit-Nav-badge-background | --bit-clr-err | Fill of the badge and the dot of an item; it keeps it in every state of the item. |
| --bit-Nav-badge-font-size | --bit-tpg-fs-2xs | Text size of the badge of an item. The Size parameter wins over it. |
| --bit-Nav-badge-height | --bit-siz-badge-md | Height of the badge of an item, which is also its smallest width, so a one-digit count stays round. The Size parameter wins over it. |
| --bit-Nav-badge-dot-size | --bit-siz-badge-dot-md | Diameter of the dot of an item. The Size parameter wins over it. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitNav parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| Accent | BitColor? | null | The accent color of the nav: the background of the hovered and the selected item. A background, foreground or border role tints the item, a semantic role fills it and recolors its content. An explicit value wins over the --bit-Nav-* hover, pressed and selected variables; left unset, the nav takes the PrimaryBackground accent unless they say otherwise. |
| AllExpanded | bool | false | Expands all items when they are first rendered. Items that arrive later are expanded as they arrive, while the items already on screen keep whatever the user has expanded or collapsed in the meantime. |
| AutoReorderOptions | bool | false | Keeps the order of the options (what the arrow keys, Home, End and type-ahead walk), at every level of the tree, 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. |
| ChevronDownIcon | BitIconInfo? | null | The icon for the chevron-down element of each nav item. Takes precedence over ChevronDownIconName when both are set. |
| ChevronDownIconName | string? | null | The custom icon name of the chevron-down element of each nav item. |
| ChildContent | RenderFragment? | null | Items to render as children. |
| Classes | BitNavClassStyles? | null | Custom CSS classes for different parts of the BitNav component. |
| CollapseAriaLabel | string? | null | The default aria-label of the expand/collapse button of an expanded item: the chevron of a parent that has a URL, or a group header. The CollapseAriaLabel of the item takes precedence over this value, and when neither is provided the text of the item is used. |
| Color | BitColor? | null | The general color of the nav that is only used for colored parts like icons. An explicit value wins over --bit-Nav-icon-color and --bit-Nav-indicator-color; left unset, the nav is primary unless they say otherwise. |
| DefaultSelectedItem | TItem? | null | The initially selected item in manual mode. |
| ExpandAriaLabel | string? | null | The default aria-label of the expand/collapse button of a collapsed item: the chevron of a parent that has a URL, or a group header. The ExpandAriaLabel of the item takes precedence over this value, and when neither is provided the text of the item is used. |
| FitWidth | bool | false | Renders the nav in a width to only fit its content. |
| FullWidth | bool | false | Renders the nav in full width of its container element. |
| 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. |
| IconOnly | bool | false | Only renders the icon of each nav item. |
| IndentPadding | int | 27 | The width in px of the chevron, which the items without children keep as padding in its place so every text lines up. |
| IndentReversedPadding | int | 4 | The indentation padding in px for items in reversed mode. |
| IndentValue | int | 16 | The indentation value in px for each level of depth of child item. |
| Items | IList<TItem> | new List<TItem>() | A collection of items to display in the BitNav component. |
| ItemSuffixTemplate | RenderFragment<TItem>? | null | Used to render custom content at the end of every item, after its text and ahead of its badge, while the item keeps its default content. The SuffixTemplate of an item wins over it. It is rendered inside the item's anchor (or button), so it holds content to look at and never a control of its own; group headers, separators, items replaced by their template and the IconOnly nav do not render it. |
| 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. |
| Match | BitNavMatch? | null | The URL matching behavior of the nav in the Automatic mode. The Match of an item takes precedence over this value, and when neither is provided the URL of an item has to match the current one exactly. |
| Mode | BitNavMode | BitNavMode.Automatic | Determines how the navigation will be handled. |
| NameSelectors | BitNavNameSelectors<TItem>? | null | Names and selectors of the custom input type properties. |
| NewTabHint | string? | null | Replaces the visually hidden "(opens in a new tab)" an item whose Target is _blank is announced with, e.g. to translate it. An empty value removes it. |
| NoCollapse | bool | false | Keeps every item expanded and hides the collapse/expand buttons together with the space they reserve at the start of each item. |
| NoNewTabHint | bool | false | Stops the items whose Target is _blank from announcing that they open a new tab - only for where a visible label or heading already says so. |
| OnItemClick | EventCallback<TItem> | Callback invoked when an item is clicked. | |
| OnItemToggle | EventCallback<TItem> | Callback invoked when an item is expanded or collapsed. | |
| OnSelectItem | EventCallback<TItem> | Callback invoked when an item is selected. | |
| Options | RenderFragment? | null | Alias of ChildContent. |
| 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. |
| SelectedItem | TItem? | null | Selected item to show in the BitNav. |
| Size | BitSize? | null | The size of the nav items. An explicit value wins over the --bit-Nav-* size variables; left unset, the nav is medium unless they say otherwise. |
| SingleExpand | bool | false | Enables the single-expand mode in the BitNav. |
| Styles | BitNavClassStyles? | null | Custom CSS styles for different parts of the BitNav component. |
BitNav public members
| Name | Type | Default value | Description |
|---|---|---|---|
| CollapseAll | Action<TItem? item> | Collapses all items and children. | |
| CollapseItem | Func<TItem, Task> | Collapses an item, and does nothing when it is already collapsed. | |
| ExpandAll | Action<TItem? item> | Expands all items and children in non-SingleExpand mode. | |
| ExpandItem | Func<TItem, Task> | Expands an item, and does nothing when it is already expanded. | |
| FocusItem | Func<TItem, ValueTask> | Moves the focus to an item of the nav, opening the branches it is nested in when it is not rendered yet. | |
| IsItemExpanded | Func<TItem, bool> | Whether the children of an item are currently shown, which is always the case while NoCollapse is set. | |
| SelectItem | Func<TItem?, Task> | Selects an item programmatically, exactly like a click on that item would in the manual mode. | |
| ToggleItem | Func<TItem, Task> | Toggles an item. |
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. An attribute written on the component wins over an entry of the same name. |
| 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. |
BitNavNameSelectors<TItem> properties
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaCurrent | BitNameSelectorPair<TItem, BitNavAriaCurrent?> | new(nameof(BitNavItem.AriaCurrent)) | The AriaCurrent field name and selector of the custom input class. |
| AriaLabel | BitNameSelectorPair<TItem, string?> | new(nameof(BitNavItem.AriaLabel)) | The AriaLabel field name and selector of the custom input class. |
| Badge | BitNameSelectorPair<TItem, string?> | new(nameof(BitNavItem.Badge)) | The Badge field name and selector of the custom input class. |
| BadgeAriaLabel | BitNameSelectorPair<TItem, string?> | new(nameof(BitNavItem.BadgeAriaLabel)) | The BadgeAriaLabel field name and selector of the custom input class. |
| Class | BitNameSelectorPair<TItem, string?> | new(nameof(BitNavItem.Class)) | The Class field name and selector of the custom input class. |
| ChildItems | BitNameSelectorPair<TItem, List<TItem>?> | new(nameof(BitNavItem.ChildItems)) | The ChildItems field name and selector of the custom input class. |
| CollapseAriaLabel | BitNameSelectorPair<TItem, string?> | new(nameof(BitNavItem.CollapseAriaLabel)) | The CollapseAriaLabel field name and selector of the custom input class. |
| Data | BitNameSelectorPair<TItem, object?> | new(nameof(BitNavItem.Data)) | The Data field name and selector of the custom input class. |
| Description | BitNameSelectorPair<TItem, string?> | new(nameof(BitNavItem.Description)) | The Description field name and selector of the custom input class. |
| Dot | BitNameSelectorPair<TItem, bool?> | new(nameof(BitNavItem.Dot)) | The Dot field name and selector of the custom input class. |
| ExpandAriaLabel | BitNameSelectorPair<TItem, string?> | new(nameof(BitNavItem.ExpandAriaLabel)) | The ExpandAriaLabel field name and selector of the custom input class. |
| ForceAnchor | BitNameSelectorPair<TItem, bool?> | new(nameof(BitNavItem.ForceAnchor)) | The ForceAnchor field name and selector of the custom input class. |
| Icon | BitNameSelectorPair<TItem, BitIconInfo?> | new(nameof(BitNavItem.Icon)) | The Icon field name and selector of the custom input class. |
| IconName | BitNameSelectorPair<TItem, string?> | new(nameof(BitNavItem.IconName)) | The IconName field name and selector of the custom input class. |
| IsDisabled | BitNameSelectorPair<TItem, bool?> | new(nameof(BitNavItem.IsDisabled)) | The IsDisabled field name and selector of the custom input class. |
| IsExpanded | BitNameSelectorPair<TItem, bool?> | new(nameof(BitNavItem.IsExpanded)) | The IsExpanded field name and selector of the custom input class. |
| IsSeparator | BitNameSelectorPair<TItem, bool?> | new(nameof(BitNavItem.IsSeparator)) | The IsSeparator field name and selector of the custom input class. |
| Key | BitNameSelectorPair<TItem, string?> | new(nameof(BitNavItem.Key)) | The Key field name and selector of the custom input class. |
| Match | BitNameSelectorPair<TItem, BitNavMatch?> | new(nameof(BitNavItem.Match)) | The Match field name and selector of the custom input class. |
| Rel | BitNameSelectorPair<TItem, BitLinkRels?> | new(nameof(BitNavItem.Rel)) | The Rel field name and selector of the custom input class. |
| Style | BitNameSelectorPair<TItem, string?> | new(nameof(BitNavItem.Style)) | The Style field name and selector of the custom input class. |
| SuffixTemplate | BitNameSelectorPair<TItem, RenderFragment<TItem>?> | new(nameof(BitNavItem.SuffixTemplate)) | The SuffixTemplate field name and selector of the custom input class. |
| Target | BitNameSelectorPair<TItem, string?> | new(nameof(BitNavItem.Target)) | The Target field name and selector of the custom input class. |
| Template | BitNameSelectorPair<TItem, RenderFragment<TItem>?> | new(nameof(BitNavItem.Template)) | The Template field name and selector of the custom input class. |
| TemplateRenderMode | BitNameSelectorPair<TItem, BitNavItemTemplateRenderMode?> | new(nameof(BitNavItem.TemplateRenderMode)) | The TemplateRenderMode field name and selector of the custom input class. |
| Text | BitNameSelectorPair<TItem, string?> | new(nameof(BitNavItem.Text)) | The Text field name and selector of the custom input class. |
| Title | BitNameSelectorPair<TItem, string?> | new(nameof(BitNavItem.Title)) | The Title field name and selector of the custom input class. |
| Url | BitNameSelectorPair<TItem, string?> | new(nameof(BitNavItem.Url)) | The Url field name and selector of the custom input class. |
| AdditionalUrls | BitNameSelectorPair<TItem, IEnumerable<string>?> | new(nameof(BitNavItem.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. |
BitColor enum
| Name | Value | Description |
|---|---|---|
| Primary | 0 | 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. |
BitLinkRels enum
| Name | Value | Description |
|---|---|---|
| Alternate | 1 | Provides a link to an alternate representation of the document. (i.e. print page, translated or mirror) |
| Author | 2 | Provides a link to the author of the document. |
| Bookmark | 4 | Permanent URL used for bookmarking. |
| External | 8 | Indicates that the referenced document is not part of the same site as the current document. |
| Help | 16 | Provides a link to a help document. |
| License | 32 | Provides a link to licensing information for the document. |
| Next | 64 | Provides a link to the next document in the series. |
| NoFollow | 128 | Links to an unendorsed document, like a paid link. ("NoFollow" is used by Google, to specify that the Google search spider should not follow that link) |
| NoOpener | 256 | Requires that any browsing context created by following the hyperlink must not have an opener browsing context. |
| NoReferrer | 512 | Makes the referrer unknown. No referrer header will be included when the user clicks the hyperlink. |
| Prev | 1024 | The previous document in a selection. |
| Search | 2048 | Links to a search tool for the document. |
| Tag | 4096 | A tag (keyword) for the current document. |
| Me | 8192 | Indicates that the linked document represents the person who owns the current content. (used for identity verification) |
| Opener | 16384 | Requires that any browsing context created by following the hyperlink keeps its opener browsing context. (reverses the implicit noopener modern browsers apply to _blank targets) |
| PrivacyPolicy | 32768 | Links to the privacy policy that applies to the current document. (rendered as privacy-policy) |
| Sponsored | 65536 | Marks the link as an advertisement or paid placement, so search engines do not count it as an organic endorsement. |
| TermsOfService | 131072 | Links to the terms of service that apply to the current document. (rendered as terms-of-service) |
| Ugc | 262144 | Marks the link as user-generated content, like forum posts or comments, for search engines. |
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.