Nuxt Navbar
A Nuxt Navbar is a navigation header that is placed at the top of the page. It can extend or collapse, depending on the screen size. A standard navigation bar is created with <nav class="navbar navbar-default">
. Check this documentation and examples for Nuxt’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Global usage
For local usage
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-links
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
1.menu
slot
2.menu-before
slot
3.menu-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
PROP NAME | TYPE | DEFAULT | DESCRIPTION | ||
---|---|---|---|---|---|
show | Boolean | N/A | Whether navbar menu is shown (valid for viewports < specified by expand prop) |
||
transparent | Boolean | N/A | Whether navbar is transparent | ||
expand | String | lg | Breakpoint where nav should expand | ||
menuClasses | String | Object | Array | N/A | Navbar menu (items) classes. Can be used to align menu items to the right/left |
containerClasses | String | Object | Array | container-fluid | Container classes. Can be used to control container classes (contains both navbar brand and menu items) |
type | Boolean | white | Navbar color type |
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 |