Blazorise Bar component

A responsive navigation component for application headers, sidebars, account menus, and nested navigation.

The Bar component can be used as a top menu in Horizontal mode or as a sidebar in one of the Vertical modes. Most applications combine BarBrand, BarStart, BarEnd, links, dropdowns, and one or more togglers.

  • <Bar> the main container.

    • <BarBrand> Horizontal: the left side, always visible. Vertical: top of Bar branding.

    • <BarToggler> Horizontal: toggles the bar. Vertical: read more below.

    • <BarMenu> Horizontal: the right side, hidden on breakpoint. Vertical: contains the core menu elements.

      • <BarStart> Horizontal: left side menu. Vertical: sticky top menu.

      • <BarEnd> Horizontal: right side menu. Vertical: sticky bottom menu.

        • <BarItem > each single item of the bar menu

          • <BarLink> item link or button

            • <BarIcon> icon for Bar item (required for BarMode.VerticalSmall)

          • <BarDropdown> dropdown container (or popout for BarMode.VerticalPopout)

            • <BarDropdownToggle> dropdown trigger

            • <BarDropdownMenu> the dropdown menu, which can include bar items and dividers for BarMode.VerticalPopout)

              • <BarDropdownItem> each single item of the dropdown menu

              • <BarDropdownDivider> Divider that can be placed between BarDropdownItem's.

              • <BarDropdown> by adding this again inside the menu, you will create nested dropdowns

Application Header

A typical horizontal Bar has a brand, primary navigation, utility actions, and an account dropdown. Use BarStart for main navigation and BarEnd for actions that should stay aligned to the opposite side. 
<Bar Breakpoint="Breakpoint.Desktop"
     Background="Background.Light"
     ThemeContrast="ThemeContrast.Light"
     Shadow="Shadow.Default">
    <BarBrand>
        <BarItem>
            <BarLink To="#dashboard">
                <BarIcon IconName="IconName.LayerGroup" />
                Atlas CRM
            </BarLink>
        </BarItem>
    </BarBrand>
    <BarToggler />
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarLink To="#pipeline">
                    Pipeline
                </BarLink>
            </BarItem>
            <BarItem>
                <BarLink To="#accounts">
                    Accounts
                </BarLink>
            </BarItem>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle>
                        Reports
                    </BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem To="#sales-report">Sales summary</BarDropdownItem>
                        <BarDropdownItem To="#activity-report">Team activity</BarDropdownItem>
                        <BarDropdownDivider />
                        <BarDropdownItem To="#scheduled-reports">Scheduled reports</BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarStart>
        <BarEnd>
            <BarItem>
                <Button Color="Color.Light" Outline>
                    <Icon Name="IconName.Search" />
                </Button>
            </BarItem>
            <BarItem>
                <Button Color="Color.Light" Outline>
                    <Icon Name="IconName.Bell" />
                    <Badge Color="Color.Danger" Pill>3</Badge>
                </Button>
            </BarItem>
            <BarItem>
                <BarDropdown RightAligned>
                    <BarDropdownToggle>
                        <BarIcon IconName="IconName.UserCircle" />
                        Maya Stone
                    </BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem To="#profile">Profile</BarDropdownItem>
                        <BarDropdownItem To="#preferences">Preferences</BarDropdownItem>
                        <BarDropdownDivider />
                        <BarDropdownItem To="#sign-out">Sign out</BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarEnd>
    </BarMenu>
</Bar>

Dropdown toggle with navigation target

BarDropdownToggle supports To the same way as other Blazorise link components. With the default Trigger="BarDropdownToggleTrigger.Auto", setting To makes the label navigate while the chevron icon toggles the submenu. This example uses Match="Match.Prefix" so the parent link stays active while the example items navigate to sections of the Bar docs page. 
<Bar Mode="BarMode.VerticalInline">
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle To="/docs/components/bar" Match="Match.Prefix">
                        <BarIcon IconName="IconName.Dashboard" />
                        Bar docs
                    </BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem To="/docs/components/bar#bar-top-bar">Top Bar</BarDropdownItem>
                        <BarDropdownItem To="/docs/components/bar#bar-vertical-sidebar">Vertical Sidebar</BarDropdownItem>
                        <BarDropdownItem To="/docs/components/bar#bar-nested-dropdowns">Nested Dropdowns</BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarStart>
    </BarMenu>
</Bar>

Dropdown trigger: icon toggles, label navigates

This is the explicit form of the default To behavior. Use it when you want the intent to be visible in markup or when composing trigger flags elsewhere in the menu. 
<Bar Mode="BarMode.VerticalInline"
     Breakpoint="Breakpoint.Desktop"
     Background="Background.Light"
     ThemeContrast="ThemeContrast.Light">
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle To="/docs/components/button"
                                       Trigger="BarDropdownToggleTrigger.IconClick">
                        <BarIcon IconName="IconName.Dashboard" />
                        Components
                    </BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem To="/docs/components/bar">Bar overview</BarDropdownItem>
                        <BarDropdownItem To="/docs/components/button">Button</BarDropdownItem>
                        <BarDropdownItem To="/docs/components/card">Card</BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarStart>
    </BarMenu>
</Bar>

Dropdown trigger: click anywhere + URL match

When users should be able to expand from either the label or icon, combine triggers with a flags expression. In this example, Trigger="BarDropdownToggleTrigger.ClickAny | BarDropdownToggleTrigger.RouteMatch" keeps the dropdown expanded whenever the current URL matches To. 
<Bar Mode="BarMode.VerticalInline"
     Breakpoint="Breakpoint.Desktop"
     Background="Background.Light"
     ThemeContrast="ThemeContrast.Light">
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle To="/docs/components/bar"
                                       Trigger="BarDropdownToggleTrigger.ClickAny | BarDropdownToggleTrigger.RouteMatch">
                        <BarIcon IconName="IconName.Dashboard" />
                        Bar docs
                    </BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem To="/docs/components/bar">Overview</BarDropdownItem>
                        <BarDropdownItem To="/docs/components/button">Button</BarDropdownItem>
                        <BarDropdownItem To="/docs/components/card">Card</BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarStart>
    </BarMenu>
</Bar>

Application Sidebar

For a sidebar layout, place the vertical Bar inside LayoutSiderContent. This pattern keeps navigation, content, and header regions in predictable layout slots. Please see the Layout docs for more information on setup with Sidebar.
Workspace overview
The vertical Bar works well as the primary navigation inside a layout sider. 
<Layout Sider Style="min-height: 420px;">
    <LayoutSider>
        <LayoutSiderContent>
            <Bar Mode="BarMode.VerticalInline"
                 CollapseMode="BarCollapseMode.Small"
                 Breakpoint="Breakpoint.Desktop"
                 NavigationBreakpoint="Breakpoint.Tablet"
                 ThemeContrast="ThemeContrast.Dark"
                 MenuToggleBehavior="BarMenuToggleBehavior.AllowSingleMenu">
                <BarBrand>
                    <BarItem>
                        <BarLink To="#workspace">
                            <BarIcon IconName="IconName.LayerGroup" />
                            Ops Console
                        </BarLink>
                    </BarItem>
                </BarBrand>
                <BarMenu>
                    <BarStart>
                        <BarItem>
                            <BarLink To="#overview">
                                <BarIcon IconName="IconName.Dashboard" />
                                Overview
                            </BarLink>
                        </BarItem>
                        <BarItem>
                            <BarDropdown>
                                <BarDropdownToggle>
                                    <BarIcon IconName="IconName.ChartLine" />
                                    Analytics
                                </BarDropdownToggle>
                                <BarDropdownMenu>
                                    <BarDropdownItem To="#traffic">Traffic</BarDropdownItem>
                                    <BarDropdownItem To="#conversion">Conversion</BarDropdownItem>
                                    <BarDropdownItem To="#retention">Retention</BarDropdownItem>
                                </BarDropdownMenu>
                            </BarDropdown>
                        </BarItem>
                        <BarItem>
                            <BarDropdown>
                                <BarDropdownToggle>
                                    <BarIcon IconName="IconName.Users" />
                                    Customers
                                </BarDropdownToggle>
                                <BarDropdownMenu>
                                    <BarDropdownItem To="#all-customers">All customers</BarDropdownItem>
                                    <BarDropdownItem To="#segments">Segments</BarDropdownItem>
                                    <BarDropdownItem To="#imports">Imports</BarDropdownItem>
                                </BarDropdownMenu>
                            </BarDropdown>
                        </BarItem>
                        <BarItem>
                            <BarLink To="#billing">
                                <BarIcon IconName="IconName.Receipt" />
                                Billing
                            </BarLink>
                        </BarItem>
                    </BarStart>
                    <BarEnd>
                        <BarItem>
                            <BarLink To="#settings">
                                <BarIcon IconName="IconName.Settings" />
                                Settings
                            </BarLink>
                        </BarItem>
                    </BarEnd>
                </BarMenu>
            </Bar>
        </LayoutSiderContent>
    </LayoutSider>
    <Layout>
        <LayoutHeader Fixed>
            <Div Padding="Padding.Is3" Background="Background.Light" Border="Border.Is1.OnBottom">
                <Heading Size="HeadingSize.Is5" Margin="Margin.Is0">Workspace overview</Heading>
            </Div>
        </LayoutHeader>
        <LayoutContent Padding="Padding.Is3">
            <Card>
                <CardBody>
                    The vertical Bar works well as the primary navigation inside a layout sider.
                </CardBody>
            </Card>
        </LayoutContent>
    </Layout>
</Layout>

Right-aligned Sidebar

You can create a right-aligned Vertical style Bar by following two key principles.
  • Use Layout to place the LayoutSider after the main Layout section.
  • Add RightAligned to dropdowns that should open toward the left side of the right rail.
Right-side navigation is useful for context tools, inspectors, and account panels. 
<Layout Sider Style="min-height: 360px;">
    <Layout>
        <LayoutContent Padding="Padding.Is3">
            <Card>
                <CardBody>
                    Right-side navigation is useful for context tools, inspectors, and account panels.
                </CardBody>
            </Card>
        </LayoutContent>
    </Layout>
    <LayoutSider>
        <LayoutSiderContent>
            <Bar Mode="BarMode.VerticalInline"
                 CollapseMode="BarCollapseMode.Small"
                 Breakpoint="Breakpoint.Desktop"
                 Background="Background.Light"
                 ThemeContrast="ThemeContrast.Light">
                <BarBrand>
                    <BarItem>
                        <BarLink To="#inspector">
                            <BarIcon IconName="IconName.SliderHorizontal" />
                            Inspector
                        </BarLink>
                    </BarItem>
                </BarBrand>
                <BarMenu>
                    <BarStart>
                        <BarItem>
                            <BarDropdown RightAligned>
                                <BarDropdownToggle>
                                    <BarIcon IconName="IconName.Filter" />
                                    Filters
                                </BarDropdownToggle>
                                <BarDropdownMenu>
                                    <BarDropdownItem To="#assigned">Assigned to me</BarDropdownItem>
                                    <BarDropdownItem To="#due-soon">Due soon</BarDropdownItem>
                                    <BarDropdownItem To="#blocked">Blocked</BarDropdownItem>
                                </BarDropdownMenu>
                            </BarDropdown>
                        </BarItem>
                        <BarItem>
                            <BarLink To="#activity">
                                <BarIcon IconName="IconName.History" />
                                Activity
                            </BarLink>
                        </BarItem>
                    </BarStart>
                </BarMenu>
            </Bar>
        </LayoutSiderContent>
    </LayoutSider>
</Layout>

Vertical Bar Toggler

The BarToggler for a vertical Bar supports two modes:
  • BarTogglerMode.Normal (default)
  • BarTogglerMode.Popout
These modes, along with an external implementation, provide three common implementations.

1. Inline

Add the BarToggler inside the vertical Bar to let the user collapse and expand the rail in place. 
<Bar Mode="BarMode.VerticalInline"
     CollapseMode="BarCollapseMode.Small"
     Breakpoint="Breakpoint.Desktop"
     Background="Background.Light"
     ThemeContrast="ThemeContrast.Light"
     Border="Border.Is1">
    <BarToggler />
    <BarBrand>
        <BarItem>
            <BarLink To="#inventory">
                <BarIcon IconName="IconName.Store" />
                Inventory
            </BarLink>
        </BarItem>
    </BarBrand>
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarLink To="#products">
                    <BarIcon IconName="IconName.ShoppingBag" />
                    Products
                </BarLink>
            </BarItem>
            <BarItem>
                <BarLink To="#orders">
                    <BarIcon IconName="IconName.ShoppingCart" />
                    Orders
                </BarLink>
            </BarItem>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle>
                        <BarIcon IconName="IconName.Truck" />
                        Shipping
                    </BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem To="#labels">Labels</BarDropdownItem>
                        <BarDropdownItem To="#carriers">Carriers</BarDropdownItem>
                        <BarDropdownItem To="#returns">Returns</BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarStart>
    </BarMenu>
</Bar>
2. Popout Set Mode="BarTogglerMode.Popout" when the toggler should sit outside the collapsed rail. 
<Bar Mode="BarMode.VerticalInline"
     CollapseMode="BarCollapseMode.Small"
     Breakpoint="Breakpoint.Desktop"
     Background="Background.Light"
     ThemeContrast="ThemeContrast.Light"
     Border="Border.Is1">
    <BarBrand>
        <BarItem>
            <BarLink To="#support">
                <BarIcon IconName="IconName.Headset" />
                Support
            </BarLink>
        </BarItem>
    </BarBrand>
    <BarToggler Mode="BarTogglerMode.Popout" />
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarLink To="#queue">
                    <BarIcon IconName="IconName.Inbox" />
                    Queue
                </BarLink>
            </BarItem>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle>
                        <BarIcon IconName="IconName.Book" />
                        Knowledge
                    </BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem To="#articles">Articles</BarDropdownItem>
                        <BarDropdownItem To="#macros">Macros</BarDropdownItem>
                        <BarDropdownItem To="#training">Training</BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarStart>
    </BarMenu>
</Bar>
3. External (controlled by Top Bar) In layouts with both a top bar and a sidebar, a top-bar toggler can control the sidebar by setting the Bar property. The example below uses two togglers inside the top bar.
  • One controls the vertical Bar.
  • One controls the horizontal Bar menu.

The first toggler controls the sidebar. The second toggler controls the horizontal bar menu. 

<Layout Sider Style="min-height: 360px;">
    <LayoutSider>
        <LayoutSiderContent>
            <Bar @ref="@sidebar"
                 Mode="BarMode.VerticalInline"
                 CollapseMode="BarCollapseMode.Small"
                 Breakpoint="Breakpoint.Desktop"
                 Background="Background.Light"
                 ThemeContrast="ThemeContrast.Light">
                <BarBrand>
                    <BarItem>
                        <BarLink To="#projects">
                            <BarIcon IconName="IconName.Briefcase" />
                            Projects
                        </BarLink>
                    </BarItem>
                </BarBrand>
                <BarMenu>
                    <BarStart>
                        <BarItem>
                            <BarLink To="#roadmap">
                                <BarIcon IconName="IconName.Map" />
                                Roadmap
                            </BarLink>
                        </BarItem>
                        <BarItem>
                            <BarLink To="#calendar">
                                <BarIcon IconName="IconName.Calendar" />
                                Calendar
                            </BarLink>
                        </BarItem>
                    </BarStart>
                </BarMenu>
            </Bar>
        </LayoutSiderContent>
    </LayoutSider>
    <Layout>
        <LayoutHeader Fixed>
            <Bar Mode="BarMode.Horizontal"
                 Breakpoint="Breakpoint.Desktop"
                 Background="Background.Light"
                 ThemeContrast="ThemeContrast.Light"
                 Shadow="Shadow.Default">
                <BarToggler Bar="@sidebar" />
                <BarBrand>
                    <BarItem>
                        <BarLink To="#planning">
                            Planning
                        </BarLink>
                    </BarItem>
                </BarBrand>
                <BarMenu>
                    <BarEnd>
                        <BarItem>
                            <Button Color="Color.Primary">
                                New project
                            </Button>
                        </BarItem>
                    </BarEnd>
                </BarMenu>
                <BarToggler />
            </Bar>
        </LayoutHeader>
        <LayoutContent Padding="Padding.Is3">
            <Paragraph>
                The first toggler controls the sidebar. The second toggler controls the horizontal bar menu.
            </Paragraph>
        </LayoutContent>
    </Layout>
</Layout>

@code {
    private Bar sidebar;
}

Nested Dropdowns

To create nested dropdowns, place a BarDropdown inside an existing BarDropdownMenu. This is useful for admin, reporting, and settings menus where the top-level item groups related actions. 
<Bar Breakpoint="Breakpoint.Desktop"
     Background="Background.Light"
     ThemeContrast="ThemeContrast.Light"
     Border="Border.Is1">
    <BarBrand>
        <BarItem>
            <BarLink To="#admin">
                <BarIcon IconName="IconName.Settings" />
                Admin
            </BarLink>
        </BarItem>
    </BarBrand>
    <BarToggler />
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle>
                        Organization
                    </BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem To="#teams">Teams</BarDropdownItem>
                        <BarDropdownItem To="#members">Members</BarDropdownItem>
                        <BarDropdown>
                            <BarDropdownToggle>
                                Security
                            </BarDropdownToggle>
                            <BarDropdownMenu>
                                <BarDropdownItem To="#roles">Roles</BarDropdownItem>
                                <BarDropdownItem To="#permissions">Permissions</BarDropdownItem>
                                <BarDropdownItem To="#audit-log">Audit log</BarDropdownItem>
                            </BarDropdownMenu>
                        </BarDropdown>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarStart>
    </BarMenu>
</Bar>

Header on top

For an example where the horizontal Bar is “on top” of the vertical Bar, please look at this example in the Layout docs.

API

Parameters

Bar

Parameter Description TypeDefault
Alignment

Specifies the alignment within bar.

Possible values:Default, Start, Center, End

 AlignmentAlignment.Default
Breakpoint

Used for responsive collapsing.

Possible values:None, Mobile, ExtraSmall, Tablet, Small, Desktop, Medium, Widescreen, Large, FullHD, ExtraLarge, QuadHD, ExtraExtraLarge

 BreakpointBreakpoint.None
ChildContent

Specifies the content to be rendered inside this Bar.

 RenderFragmentnull
CollapseMode

Specifies how the bar will be collapsed.

Possible values:Hide, Small

 BarCollapseModeBarCollapseMode.Hide
MenuToggleBehavior

Specifies how the bar menu will behave when toggled.

Possible values:AllowSingleMenu, AllowMultipleMenus

 BarMenuToggleBehaviorBarMenuToggleBehavior.AllowMultipleMenus
Mode

Specifies the orientation for the bar. Vertical* is required when using as a Sidebar.

Possible values:Horizontal, VerticalPopout, VerticalInline, VerticalSmall

 BarModeBarMode.Horizontal
NavigationBreakpoint

Used for responsive collapsing after Navigation.

Possible values:None, Mobile, ExtraSmall, Tablet, Small, Desktop, Medium, Widescreen, Large, FullHD, ExtraLarge, QuadHD, ExtraExtraLarge

 BreakpointBreakpoint.None
ThemeContrast

Specifies the preferred theme contrast for this Bar component.

Possible values:None, Light, Dark

 ThemeContrastThemeContrast.None
Visible

Controls the state of toggler and the menu.

 boolfalse

BarLink

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this BarLink.

 RenderFragmentnull
Match

URL matching behavior for a link.

Possible values:Prefix, All

 MatchMatch.All
Target

The target attribute specifies where to open the linked document.

 TargetTarget.Default
Title

Specify extra information about the element.

 string
To

Specifies the URL of the page the link goes to.

 string

BarDropdownToggle

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this Link.

 RenderFragmentnull
Disabled

Makes the link look inactive by adding the disabled boolean attribute.

 boolfalse
Indentation

Determines how much left padding will be applied to the dropdown toggle. (in rem unit)

 double1.5d
Match

URL matching behavior for a link.

Possible values:Prefix, All

 MatchMatch.Prefix
Stretched

Makes any HTML element or component clickable by “stretching” a nested link.

 boolfalse
TabIndex

Specifies whether the link element can be focused and where it participates in sequential keyboard navigation.

 int?null
Target

The target attribute specifies where to open the linked document.

 TargetTarget.Default
Title

Specify extra information about the element.

 string
To

Denotes the target route of the link.

 string
ToggleIconVisible

Specifies a value indicating whether the dropdown toggle icon is visible.

Remarks

Default: True

 bool?null
Trigger

Specifies which interactions can trigger the dropdown toggle.

Possible values:Auto, ToggleClick, IconClick, ClickAny, RouteMatch, All

 BarDropdownToggleTriggerdefault(BarDropdownToggleTrigger)
Unstyled

Removes default color styles from the link.

 boolfalse

Events

Bar

Event Description Type
VisibleChanged

Notifies when the bar visibility changes.

 EventCallback<bool>

BarLink

Event Description Type
Clicked

Notifies when the item is clicked.

 EventCallback<MouseEventArgs>
CustomMatch

A callback function that is used to compare current uri with the user defined uri. If defined, the Match parameter will be ignored.

 Func<string, bool>

BarDropdownToggle

Event Description Type
Clicked

Notifies when the link is clicked.

 EventCallback<MouseEventArgs>
CustomMatch

A callback function that is used to compare current uri with the user defined uri. If defined, the Match parameter will be ignored.

 Func<string, bool>

Methods

Bar

Method DescriptionReturnParameters
HideAllExcept Hides all items except the one that is passed as a parameter. TaskBarItem barItem
Toggle Toggles the Visible state of the Bar component. Task

BarDropdownToggle

Method DescriptionReturnParameters
Close Triggers the closable component to be closed. TaskCloseReason closeReason
IsSafeToClose Finds if the closable component is ready to be closed. Task<bool>string elementId, CloseReason closeReason, bool isChildClicked
On this page