Navbar

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

<template>
    <b-navbar>
        <template slot="brand">
            <b-navbar-item tag="router-link" :to="{ path: '/' }">
                <img
                    src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-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

Navbar

Name
Description
Type
Values
Default
transparentRemove any hover or active background from the navbar items Boolean false
fixed-topFixes the navbar to the top of the page Boolean false
fixed-bottomFixes the navbar to the bottom of the page Boolean false
is-activeTo control the behaviour of the mobile menu programmatically, use the .sync modifier to make it two-way binding Boolean false
typeType (color) of the background, optional String, is-white, is-black, is-light, is-dark, is-primary, is-info, is-success, is-warning, is-danger, and any other colors you've set in the $colors list on Sass
wrapper-classTo wrap the navbar content into an div with the provided class String
close-on-clickControl the behavior of the mobile menu by clicking on a link or outside the menu Boolean true, falsetrue
mobile-burgerUse to display or not the burger on mobile resolution. Boolean true, falsetrue
spacedSets Top and Bottom paddings with 1rem, Left and Right paddings with 2rem Boolean false
shadowAdd a shadow to navbar Boolean false

Navbar Item

Name
Description
Type
Values
Default
tagSets 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
activeItem is active Boolean -false

Navbar Dropdown

Name
Description
Type
Values
Default
hoverableDropdown will be triggered by hover instead of click Boolean -false
activeItem is active Boolean -false
rightDropdown will be anchored to the right side Boolean -false
arrowlessShow/hide arrow icon on dropdown Boolean -false
boxedShow a boxed version of the dropdown Boolean -false

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub