- bit BlazorUI
Home Docs
  • Inputs
  • Layouts
  • Lists
  • Navs
  • Notifications
  • Progress
  • Surfaces
  • Utilities
  • Extras
  • Iconography
  • Theming

    • Nav

    A navigation pane (Nav) provides links to the main areas of an app or site.

    Notes

    The BitNav is a Multi-API component which can accept the list of Items in 3 different ways: BitNavItem class, a custom Generic class, and BitNavOption component.

    Usage

    FitWidth
    the bit platform description
  • Community
  • Iconography
    • Grouped
  • Sedans & Wagons
  • Coupes
    • Manual Mode
    Basic

    List of fast foods
    • Burgers
    List of burgers
  • Pizza
  • Fruits



    • Two-Way Bind

    List of fast foods
  • Fruits

    • IconOnly

    Custom Templates
    Header Template (Grouped)

  • Sedans & Wagons
  • Coupes



    • Item Template

    Events
    List of fast foods
    • Burgers
    List of burgers
  • Pizza
  • Fruits
    • Clicked Item:
    Selected Item:
    Toggled Item: N/A
    Custom Styles
    the bit platform description
  • Community
  • Iconography
    • RTL
    توضیحاتِ پلتفرمِ بیت
  • انجمن ها
  • شمایل نگاری

    • API

    BitNav parameters
    Name
    Type
    Default value
    Description
    Accent BitColor? null The accent color of the nav.
    ChevronDownIcon string? null The custom icon name of the chevron-down element of the BitNav component.
    ChildContent RenderFragment? null Items to render as children.
    Classes BitNavClassStyles? null Custom CSS classes for different parts of the BitNav component.
    Color BitColor? null The general color of the nav.
    DefaultSelectedItem TItem? null The initially selected item in manual mode.
    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.
    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.
    Items IList<TItem> new List<TItem>() A collection of item to display in the navigation bar.
    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.
    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.
    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.
    SelectedItem TItem? null Selected item to show in the BitNav.
    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 Collapses all items and children.
    ToggleItem Func<Task, TItem> Toggles an item.
    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.
    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.
    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.
    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.
    IconName BitNameSelectorPair<TItem, string?> new(nameof(BitNavItem.IconName)) The IconName field name and selector of the custom input class.
    IsEnabled BitNameSelectorPair<TItem, bool?> new(nameof(BitNavItem.IsEnabled)) The IsEnabled 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.
    Style BitNameSelectorPair<TItem, string?> new(nameof(BitNavItem.Style)) The Style 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.
    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.
    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.