Navbar

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

<template>
    <b-navbar>
        <template slot="brand">
            <b-navbar-item href="/">
                <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>
        </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
transparentTo 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 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

Navbar Item

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

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

Improve this page on GitHub