Vue Navbar Component API

Navbar API

Explore the API reference for the Vue Navbar component and discover how to effectively utilize its props for customization.

On this page

jsx

import { CNavbar } from '@coreui/vue'

Property	Default	Type
as	`'nav'`	`string`
Component used for the root node. Either a string to use a HTML element or a component.
color	-	`Color`
Sets the color context of the component to one of CoreUI’s themed colors.
colorScheme	-	`string`
Sets if the color of text should be colored for a light or dark dark background.
container	-	`boolean`, `string`
Defines optional container wrapping children elements.
expand	-	`boolean`, `string`
Defines the responsive breakpoint to determine when content collapses.
placement	-	`string`
Place component in non-static positions.
translucent6.0.0+	-	`boolean`
Give the navbar a translucent, blurred surface.

jsx

import { CNavbarBrand } from '@coreui/vue'

Property	Default	Type
as	`'a'`	`string`
Component used for the root node. Either a string to use a HTML element or a component.
href	-	`string`
The href attribute specifies the URL of the page the link goes to.

jsx

import { CNavbarNav } from '@coreui/vue'

Property	Default	Type
as	`'ul'`	`string`
Component used for the root node. Either a string to use a HTML element or a component.
scroll6.0.0+	-	`boolean`
Enable vertical scrolling within the expanded navbar - cap the height with the `--cui-scroll-height` custom property.

jsx

import { CNavbarText } from '@coreui/vue'

jsx

import { CNavbarToggler } from '@coreui/vue'