Navbar
Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
import {BaseNav} from '@/components'
Global usage
Vue.component(BaseNav.name, BaseNav)
For local usage
export default {
components: {
BaseNav
}
}
How it works
Here’s what you need to know before getting started with the navbar:
- Navbars require a wrapping
.navbar
with.navbar-expand{-sm|-md|-lg|-xl}
for responsive collapsing and color scheme classes. - Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
- Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
- Navbars are hidden by default when printing. Force them to be printed by adding
.d-print
to the.navbar
. See the display utility class. - Ensure accessibility by using a
<nav>
element or, if using a more generic element such as a<div>
, add arole="navigation"
to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
Nav
Navbar navigation links build on our .nav
options with their own modifier class and require the use of toggler component for proper responsive styling.
Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned.
Active states—with .active
—to indicate the current page can be applied directly to .nav-link
s or their immediate parent .nav-items
.
You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning,
so be sure to use separate and nested elements for .nav-item
and .nav-link
as shown below.
Forms
Place various form controls and components within a navbar with .form-inline
.
Text
Navbars may contain bits of text with the help of .navbar-text
.
This class adjusts vertical alignment and horizontal spacing for strings of text.
Mix and match with other components and utilities as needed.
Color schemes
Theming the navbar has never been easier thanks to the combination of
theming classes and background-color utilities.
Choose from .navbar-light
for use with light background colors, or .navbar-dark
for dark background colors.
Then, customize with type: "*"
prop. You can also add a border top using data-color
attribute.
Containers
When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your
specified expand="{-sm|-md|-lg|-xl}"
prop.
This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.
Placement
Use our position utilities to place navbars in non-static positions.
Choose from fixed to the top, fixed to the bottom,
or stickied to the top (scrolls with the page until it reaches the top, then stays there).
Fixed navbars use position: fixed
, meaning they’re pulled from the normal flow
of the DOM and may require custom CSS (e.g., padding-top
on the <body>
) to prevent overlap with other elements.
Also note that .sticky-top
uses position: sticky
, which isn’t fully supported in every browser.
Responsive behaviors
Navbars can utilize expand="{-sm|-md|-lg|-xl}"
prop to change when their content collapses behind a button.
In combination with other utilities, you can easily choose when to show or hide particular elements.
For navbars that never collapse, add the .navbar-expand
class on the navbar.
For navbars that always collapse, simply set expand=""
class.
Toggler
By default the base-nav
component contains a toggler that appears on lower breakpoints
based on expand="{-sm|-md|-lg|-xl}"
prop. For example if expand="lg"
, the toggler will appear on
screens lower than lg
breakpoint. The content that appears in the toggled menu is the content within these 3 slots
menu
slotmenu-before
slotmenu-after
slot
Below is an example that doesn't display the brand on smaller viewports
With brand name on the left and toggler on the right
BaseNav props
BaseNav Slots
Slot | Description |
---|---|
default | Default content for navbar. Will appear in navbar menu on small viewports |
brand | Navbar brand slot |
toggle-button | Navbar toggle button. Note that providing content for this slot means that you manually have to show/hide navbar menu |
← Modal Nucleo Icons →