Navbar

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

<template>
    <b-navbar>
        <template #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 #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 #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
`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`
`active`	To control the behaviour of the mobile menu programmatically, use the `.sync` modifier to make it two-way binding	Boolean	—	`false`
`centered`	To center the navbar-start slot	Boolean	—	`false`
`type`	Type (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-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	`true`, `false`	false

Slot name	Description	Props (if scoped)
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	—

Item

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

Dropdown

Name	Description	Type	Values	Default
`tag`	Sets the type of the component that have to render as navbar-item	String	`a`, `router-link`, `div` and it's html attributes like href, to, etc...	a
`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
`collapsible`	Collapsible dropdown on mobile	Boolean		false

Slot name	Description	Props (if scoped)
default	Menu item body	—
`label`	Dropdown menu custom label	-

Name	Description	Parameters
`active-change`	Triggers when dropdown is activated or deactivated (visibility of list)	`active: Boolean`

# Variables

You can use these variables to customize this component.

Name	Default
Bulma variables	Link

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

Improve this page on GitHub