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 itemsBooleanfalse
fixed-topFixes the navbar to the top of the pageBooleanfalse
fixed-bottomFixes the navbar to the bottom of the pageBooleanfalse
activeTo control the behaviour of the mobile menu programmatically, use the .sync modifier to make it two-way bindingBooleanfalse
centeredTo center the navbar-start slotBooleanfalse
typeType (color) of the background, optionalString, 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 classString
close-on-clickControl the behavior of the mobile menu by clicking on a link or outside the menuBooleantrue, falsetrue
mobile-burgerUse to display or not the burger on mobile resolution.Booleantrue, falsetrue
spacedSets Top and Bottom paddings with 1rem, Left and Right paddings with 2remBooleanfalse
shadowAdd a shadow to navbarBooleantrue, falsefalse

Item

Name
Description
Type
Values
Default
tagSets the type of the component that have to render as navbar-itemStringa, router-link, div and his html attributes like href, to, etc...a
activeItem is activeBoolean-false

Dropdown

Name
Description
Type
Values
Default
hoverableDropdown will be triggered by hover instead of clickBoolean-false
activeItem is activeBoolean-false
rightDropdown will be anchored to the right sideBoolean-false
arrowlessShow/hide arrow icon on dropdownBoolean-false
boxedShow a boxed version of the dropdownBoolean-false
collapsibleCollapsible dropdown on mobileBooleanfalse

# Variables

You can use these variables to customize this component.

Name
Default
Bulma variablesLink

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

Improve this page on GitHub