Bar component

Basics

The bar component is a responsive and versatile horizontal navigation bar with the following structure:

  • Bar the main container
    • BarBrand the left side, always visible, usually contains the logo
    • BarToggler toggles the bar menu on the touch devices
    • BarMenu the right side, hidden on touch devices, visible on desktop
    • BarStart (left side of the menu)
    • BarEnd (right side of the menu)
      • BarItem each single item of the bar menu
        • BarLink item link or button
        • BarDropdown dropdown container
          • BarDropdownToggle dropdown trigger
          • BarDropdownMenu the dropdown menu, which can include bar items and dividers
            • BarDropdownItem each single item of the dropdown menu

Basic Bar

<Bar Breakpoint="Breakpoint.Desktop" Background="Background.Light" Theme="Theme.Light">
    <BarBrand>
        Brandname
    </BarBrand>
    <BarToggler>
    </BarToggler>
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarLink To="#home">Home</BarLink>
            </BarItem>
            <BarItem>
                <BarLink To="#docs">Documentation</BarLink>
            </BarItem>
        </BarStart>
        <BarEnd>
            <BarItem>
                <Button Color="Color.Primary">Sign up</Button>
                <Button Color="Color.Secondary">Log in</Button>
            </BarItem>
        </BarEnd>
    </BarMenu>
</Bar>

With dropdown

<Bar Breakpoint="Breakpoint.Desktop" Background="Background.Light" Theme="Theme.Light">
    <BarBrand>
        Brandname
    </BarBrand>
    <BarToggler>
    </BarToggler>
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarLink To="#home">Home</BarLink>
            </BarItem>
            <BarItem>
                <BarLink To="#docs">Documentation</BarLink>
            </BarItem>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle>Dropdown</BarDropdownToggle>
                    <BarDropdownMenu>                        
                        <BarDropdownItem>Action</BarDropdownItem>
                        <BarDropdownItem>Another action</BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarStart>
    </BarMenu>
</Bar>

Attributes

Name Type Default Description
IsOpen boolean false Controlls the state of toggler and the menu.
Breakpoint Breakpoint None Defines the media breakpoint.
ThemeContrast ThemeContrast Light Adjusts the contrast for light or dark themes.
Background Background None Sets the bar background color.
Color Colors None Component visual or contextual style variants.