Navbar

Create a navigation bar that can be used for your main site navigation.

Usage

The Navbar component consists of a navbar itself and one or more navigations.

<vk-navbar>
  <vk-navbar-nav>
    <vk-navbar-nav-item href active></vk-navbar-nav-item>
    <vk-navbar-nav-item href></vk-navbar-nav-item>
  </vk-navbar-nav>
</vk-navbar>

Multiple navigations

You can place more than one navigation inside a navbar. That way you can have a left aligned, a centered and a right aligned navigation inside the same navbar.

<vk-navbar>
  <vk-navbar-nav></vk-navbar-nav>
  <vk-navbar-nav slot="center"></vk-navbar-nav>
  <vk-navbar-nav slot="right"></vk-navbar-nav>
</vk-navbar>

Click mode

A parent item inside the navbar can be enabled by either hovering or clicking the toggle. Just add the mode="click" prop to the vk-navbar-nav-dropdown.

<vk-navbar>
  <vk-navbar-nav>
    <vk-navbar-nav-dropdown mode="click">...</vk-navbar-nav-dropdown>
  </vk-navbar-nav>
</vk-navbar>

Transparent modifier

When using an image or colored background for the hero section of your website, you might want to turn the navbar transparent. Simply set the transparent prop and if necessary, add the .uk-light or .uk-dark class from the UIkit Inverse component to adjust the navbar's color.

<vk-navbar transparent>...</vk-navbar>

• Preview
• Markup

Subtitle

To define a subtitle, set the subtitle prop to vk-navbar-nav-item.

<vk-navbar-nav-item subtitle></vk-navbar-nav-item>

Content item

You can also add custom content to the navbar, like text, icons, buttons or forms. Use the vk-navbar-item component that serves as a container for your content.

<vk-navbar>
  <vk-navbar-nav>
    <vk-navbar-logo></vk-navbar-logo>
    <vk-navbar-nav>...</vk-navbar-nav>
    <vk-navbar-item>...</vk-navbar-item>
  </vk-navbar-nav>
</vk-navbar>

Use the vk-navbar-logo to indicate your brand.

Centered logo

You can create a split menu with a centered logo. Use the center-left soft for one nav and center-right slot for the other. This will keep your logo centered and align the menus to the left and right.

<vk-navbar>
  <vk-navbar-nav slot="center-left">...</vk-navbar-nav>
  <vk-navbar-logo slot="center">...</vk-navbar-logo>
  <vk-navbar-nav slot="center-right">...</vk-navbar-nav>
</vk-navbar>

Toggle item

Use the vk-navbar-toggle to render an icon as a toggle. By default, there is no JavaScript attached to the toggle. As an example, you can add an offcanvas navigation from the Offcanvas component or a modal from the Modal component.

<vk-navbar>
  <vk-navbar-toggle></vk-navbar-toggle>
</vk-navbar>

Dropdowns

A navbar can contain a dropdown from the Dropdown component. Simply use the vk-navbar-nav-dropdown wrapper so it fits perfectly into the navbar's styling and behaviour. Use vk-navbar-nav-dropdown-nav for the nav inside the dropdown.

<vk-navbar-nav>
  <vk-navbar-nav-dropdown title>
    <vk-navbar-nav-dropdown-nav>...</vk-navbar-nav-dropdown-nav>
  </vk-navbar-nav-dropdown>
</vk-navbar-nav>

Multiple columns

The vk-navbar-nav-dropdown will automatically arrange the dropdown content in up to five columns. Columns will stack, if they no longer fit into the container.

<vk-navbar-nav>
  <vk-navbar-nav-dropdown title>
    <vk-navbar-nav-dropdown-nav>...</vk-navbar-nav-dropdown-nav>
    <vk-navbar-nav-dropdown-nav>...</vk-navbar-nav-dropdown-nav>
  </vk-navbar-nav-dropdown>
</vk-navbar-nav>

Boundary alignment

Dropdowns can be aligned to the navbar's boundary by setting the navbar-aligned prop. Use the align prop to change the alignment to left, center or right. By default, dropdowns are aligned to the left.

<vk-navbar-nav-dropdown title navbar-aligned align="center">...</vk-navbar-nav-dropdown>

Justify

To justify a dropdown, set justified prop. In the following example it is aligned to the navbar boundary.

<vk-navbar-nav-dropdown title navbar-aligned justified>...</vk-navbar-nav-dropdown>

Dropbar

A dropbar extends to the full width of the navbar and displays the dropdown without its default styling. To place dropdowns inside such a dropbar, wrap the navbar with vk-navbar-dropbar.

<vk-navbar-dropbar>
  <vk-navbar>
    <vk-navbar-nav>
      <vk-navbar-nav-dropdown title>...</vk-navbar-nav-dropdown>
    </vk-navbar-nav>
  </vk-navbar>
</vk-navbar-dropbar>

Push

By default, the dropbar overlays the site content. Set the mode="push" prop to push the content down instead.

<vk-navbar-dropbar mode="push">
  <vk-navbar>
    <vk-navbar-nav>
      <vk-navbar-nav-dropdown title>...</vk-navbar-nav-dropdown>
    </vk-navbar-nav>
  </vk-navbar>
</vk-navbar-dropbar>

Props

vk-navbar

vk-navbar-full

vk-navbar-dropbar

vk-navbar-nav-item

vk-navbar-nav-dropdown