Navbar

Navbar

A responsive horizontal navbar that can support images, links, buttons, and dropdowns

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

navbar the main container
- navbar-brand the left side, always visible, which usually contains the logo and optionally some links or icons
  - navbar-burger the hamburger icon, which toggles the navbar menu on touch devices
- navbar-menu the right side, hidden on touch devices, visible on desktop
  - navbar-start the left part of the menu, which appears next to the navbar brand on desktop
  - navbar-end the right part of the menu, which appears at the end of the navbar
    - navbar-item each single item of the navbar, which can either be an a or a div
      - navbar-link a link as the sibling of a dropdown, with an arrow
      - navbar-dropdown the dropdown menu, which can include navbar items and dividers
        navbar-divider a horizontal line to separate navbar items

<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        <a class="navbar-item" href="/">
            <img src="/static/img/buval-logo.png"/>
        </a>
        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>

    <div id="navbarBasicExample" class="navbar-menu">
        <div class="navbar-start">
            <a class="navbar-item">Home</a>
            <a class="navbar-item">Documentation</a>
            <div class="navbar-item has-dropdown is-hoverable">
                <a class="navbar-link">More</a>
                <div class="navbar-dropdown">
                    <a class="navbar-item">About</a>
                    <a class="navbar-item">Jobs</a>
                    <a class="navbar-item">Contact</a>
                    <hr class="navbar-divider" />
                    <a class="navbar-item">Report an issue</a>
                </div>
            </div>
        </div>
        <div class="navbar-end">
            <div class="navbar-item">
            <div class="buttons">
                <a class="button is-primary">
                    <strong>Sign up</strong>
                </a>
                <a class="button is-light">Log in</a>
            </div>
            </div>
        </div>
    </div>
</nav>

Navbar Brand

The navbar-brand is the left side of the navbar. It can contain:

a number of navbar-item
the navbar-burger as last child

<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        <!-- navbar items, navbar burger... -->
    </div>
</nav>

The navbar brand is always visible: on both touch devices < 1024px and desktop >= 1024px . As a result, it is recommended to only use a few navbar items to avoid overflowing horizontally on small devices.

On desktop >= 1024px , the navbar brand will only take up the space it needs.

<template>
    <nav class="navbar" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a class="navbar-item" href="https://bulma.io">
                <img
                    src="/static/img/buval-logo.png"
                    alt="Lightweight UI components for Vue.js based on Bulma">
            </a>
            <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>
    </nav>
</template>

Navbar menu

The navbar-menu is the counterpart of the navbar brand. As such, it must appear as a direct child of navbar, as a sibling of navbar-brand.

<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        <!-- navbar items, navbar burger... -->
    </div>
    <div class="navbar-menu">
        <!-- navbar start, navbar end -->
    </div>
</nav>

The navbar-menu is hidden on touch devices < 1024px . You need to add the modifier class is-active to display it.

<div class="navbar-menu">
    <!-- hidden on mobile -->
</div>
<div class="navbar-menu is-active">
    <!-- shown on mobile -->
</div>

On desktop >= 1024px , the navbar-menu will fill up the space available in the navbar, leaving the navbar brand just the space it needs. It needs, however, two elements as direct children:

navbar-start
navbar-end

Navbar start and navbar end

The navbar-start and navbar-end are the two direct and only children of the navbar-menu.

On desktop >= 1024px :

navbar-start will appear on the left
navbar-end will appear on the right

Each of them can contain any number of navbar-item.

<div class="navbar-menu">
    <div class="navbar-start">
        <!-- navbar items -->
    </div>

    <div class="navbar-end">
        <!-- navbar items -->
    </div>
</div>

Navbar item

A navbar-item is a repeatable element that can be:

a navigation link
```
<a class="navbar-item">
    Home
</a>
```

a container for the brand logo

<a class="navbar-item">
    <img src="/static/img/buval-logo.png" alt="Buval">
</a>

the parent of a dropdown menu

<div class="navbar-item has-dropdown">
    <a class="navbar-link">
        Docs
    </a>

    <div class="navbar-dropdown">
        <!-- Other navbar items -->
    </div>
</div>

a child of a navbar dropdown

<div class="navbar-dropdown">
    <a class="navbar-item">
        Overview
    </a>
</div>

a container for almost anything you want, like a field

<div class="navbar-item">
    <div class="field is-grouped">
        <p class="control">
            <a class="button">
                <span class="icon">
                    <i class="fas fa-twitter" aria-hidden="true"></i>
                </span>
                <span>Tweet</span>
            </a>
        </p>
        <p class="control">
            <a class="button is-primary">
                <span class="icon">
                    <i class="fas fa-download" aria-hidden="true"></i>
                </span>
                <span>Download</span>
            </a>
        </p>
    </div>
</div>

It can either be an anchor tag <a> or a <div>, as a direct child of either:

navbar
navbar-brand
navbar-start
navbar-end
navbar-dropdown

You can add the following modifier classes:

is-expanded to turn it into a full-width element
is-tab to add a bottom border on hover and show the bottom border using is-active

Transparent navbar

To seamlessly integrate the navbar in any visual context, you can add the is-transparent modifier on the navbar component. This will remove any hover or active background from the navbar items.

<nav class="navbar is-transparent">
    <div class="navbar-brand">
        <a class="navbar-item" href="/">
            <img src="/static/img/buval-logo.png" alt="Buval">
        </a>
        <div class="navbar-burger burger" data-target="navbarExampleTransparentExample">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

    <div id="navbarExampleTransparentExample" class="navbar-menu">
        <div class="navbar-start">
            <a class="navbar-item" href="/">
                Home
            </a>
            <div class="navbar-item has-dropdown is-hoverable">
                <a class="navbar-link" href="/">
                    Docs
                </a>
                <div class="navbar-dropdown is-boxed">
                    <a class="navbar-item" href="/">
                        Extensions
                    </a>
                    <a class="navbar-item" href="/">
                        Desains
                    </a>
                </div>
            </div>
        </div>
        <div class="navbar-end">
            <div class="navbar-item">
                <div class="field is-grouped">
                    <p class="control">
                        <a class="button is-mix">
                            <span class="icon">
                                <i class="fab fa-twitter"></i>
                            </span>
                            <span>
                                Tweet
                            </span>
                        </a>
                    </p>
                    <p class="control">
                        <a class="button is-primary">
                            <span class="icon">
                                <i class="fas fa-download"></i>
                            </span>
                            <span>Download</span>
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</nav>

Fixed navbar

You can now fix the navbar to either the top or bottom of the page. This is a 2-step process:

Add either is-fixed-top or is-fixed-bottom to the navbar component
```
<nav class="navbar is-fixed-top">
```
Add the corresponding has-navbar-fixed-top or has-navbar-fixed-bottom modifier to either <html> or <body> element to provide the appropriate padding to the page
```
<html class="has-navbar-fixed-top">
```

Colors

You can change the background color of the navbar by using one of the 9 color modifiers:

is-primary
is-link
is-info
is-success
is-warning
is-danger
is-black
is-dark
is-light
is-white

Navbar Helper Classes

Type	Name	Description
Spacing	`is-spaced`	Sets Top and Bottom paddings with 1rem, Left and Right paddings with 2rem

<template>
    <b-navbar>
        <template slot="brand">
            <b-navbar-item tag="router-link" :to="{ path: '/' }">
                <img
                    src="/static/img/buval-logo.png"
                    alt="Lightweight UI components for Vue.js based on Bulma"
                >
            </b-navbar-item>
        </template>
        <template slot="start">
            <b-navbar-item href="#">
                Home
            </b-navbar-item>
            <b-navbar-item href="#">
                Documentation
            </b-navbar-item>
            <b-navbar-dropdown label="Info">
                <b-navbar-item href="#">
                    About
                </b-navbar-item>
                <b-navbar-item href="#">
                    Contact
                </b-navbar-item>
            </b-navbar-dropdown>
        </template>

        <template slot="end">
            <b-navbar-item tag="div">
                <div class="buttons">
                    <a class="button is-primary">
                        <strong>Sign up</strong>
                    </a>
                    <a class="button is-light">
                        Log in
                    </a>
                </div>
            </b-navbar-item>
        </template>
    </b-navbar>
</template>

API

Name	Description	Type	Value	Default
`transparent`	Remove any hover or active background from the navbar items	Boolean	—	false
`fixed-top`	Fixes the navbar to the top of the page	Boolean	—	`false`
`fixed-bottom`	Fixes the navbar to the bottom of the page	Boolean	—	`false`
`is-active`	To control the behaviour of the mobile menu programmatically, use the `.sync` modifier to make it two-way binding	Boolean	—	`false`
`type`	Type (color) of the background, optional	String,	`is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `is-mix`, `is-info`, `is-success`, `is-warning`, `is-danger`, and any other colors you've set in the `$colors` list on Sass	—
`wrapper-class`	To wrap the navbar content into an div with the provided class	String	—	—
`close-on-click`	Control the behavior of the mobile menu by clicking on a link or outside the menu	Boolean	`true`, `false`	`true`
`mobile-burger`	Use to display or not the burger on mobile resolution.	Boolean	`true`, `false`	`true`
`spaced`	Sets Top and Bottom paddings with 1rem, Left and Right paddings with 2rem	Boolean	—	false
`shadow`	Add a shadow to navbar	Boolean	—	false

Name slot	Description	Props (if no)
brand	The slot for the brand logo	—
burger	The slot for the burger that triggers the menu toggle	`isOpened: Boolean`, `toggleActive: Function`
start	Items that will appear on the left	—
end	Items that will appear on the right	—

Navbar Item

Name	Description	Type	Value	Default
`tag`	Sets the type of the component that have to render as navbar-item	String	`a`, `router-link`, `div` and his html attributes like href, to, etc...	a
`active`	Item is active	Boolean	-	false

Navbar Dropdown

Name	Description	Type	Value	Default
`hoverable`	Dropdown will be triggered by hover instead of click	Boolean	-	false
`active`	Item is active	Boolean	-	false
`right`	Dropdown will be anchored to the right side	Boolean	-	false
`arrowless`	Show/hide arrow icon on dropdown	Boolean	-	false
`boxed`	Show a boxed version of the dropdown	Boolean	-	false

Name slot	Description	Props (if no)
default	Menu item body	—
`label`	Dropdown menu custom label	-

Variables #

You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.

Name	Type	Default
`$navbar-background-color`	color	`$scheme-main`
`$navbar-box-shadow-size`	size	`0 2px 0 0`
`$navbar-box-shadow-color`	color	`$background`
`$navbar-height`	size	`3.25rem`
`$navbar-padding-vertical`	size	`1rem`
`$navbar-padding-horizontal`	size	`2rem`
`$navbar-z`	string	`30`
`$navbar-fixed-z`	string	`30`
`$navbar-item-color`	color	`$text`
`$navbar-item-hover-color`	color	`$link`
`$navbar-item-hover-background-color`	color	`$scheme-main-bis`
`$navbar-item-active-color`	color	`$scheme-invert`
`$navbar-item-active-background-color`	string	`transparent`
`$navbar-item-img-max-height`	size	`1.75rem`
`$navbar-burger-color`	variable	`$navbar-item-color`
`$navbar-tab-hover-background-color`	string	`transparent`
`$navbar-tab-hover-border-bottom-color`	color	`$link`
`$navbar-tab-active-color`	color	`$link`
`$navbar-tab-active-background-color`	string	`transparent`
`$navbar-tab-active-border-bottom-color`	color	`$link`
`$navbar-tab-active-border-bottom-style`	string	`solid`
`$navbar-tab-active-border-bottom-width`	size	`3px`
`$navbar-dropdown-background-color`	color	`$scheme-main`
`$navbar-dropdown-border-top`	size	`2px solid $border`
`$navbar-dropdown-offset`	size	`-4px`
`$navbar-dropdown-arrow`	color	`$link`
`$navbar-dropdown-radius`	size	`$radius-large`
`$navbar-dropdown-z`	string	`20`
`$navbar-dropdown-boxed-radius`	size	`$radius-large`
`$navbar-dropdown-boxed-shadow`	size	`0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1)`
`$navbar-dropdown-item-hover-color`	color	`$scheme-invert`
`$navbar-dropdown-item-hover-background-color`	color	`$background`
`$navbar-dropdown-item-active-color`	color	`$link`
`$navbar-dropdown-item-active-background-color`	color	`$background`
`$navbar-divider-background-color`	color	`$background`
`$navbar-divider-height`	size	`2px`
`$navbar-bottom-box-shadow-size`	size	`0 -2px 0 0`
`$navbar-breakpoint`	computed	`$desktop`