Navbar
Navbar is a flexible container for navigation elements that helps organize content at the top of a page. It supports various layouts with start, center, and end sections for optimal content placement.
Basic Usage
Code Example
1.vue
Navbar is a flexible container for navigation elements that helps organize content at the top of a page. It supports various layouts with start, center, and end sections for optimal content placement.
The Navbar components include the following:
The Navbar component is a container for navigation elements that helps organize content at the top of a page.
| Navbar Props | Type | Description |
|---|---|---|
is | any | Allows changing the element tag. Default is |
glass | boolean | Enables the glass style for the navbar. |
| Navbar Slots | Description |
|---|---|
default | The default slot. Content to be displayed inside the navbar. Can contain |
The NavbarStart component is a container for elements that should appear at the start (left side) of the navbar.
| NavbarStart Props | Type | Description |
|---|---|---|
is | any | Allows changing the element tag. Default is |
| NavbarStart Slots | Description |
|---|---|
default | The default slot. Content to be displayed at the start of the navbar. |
The NavbarCenter component is a container for elements that should appear at the center of the navbar.
| NavbarCenter Props | Type | Description |
|---|---|---|
is | any | Allows changing the element tag. Default is |
| NavbarCenter Slots | Description |
|---|---|
default | The default slot. Content to be displayed at the center of the navbar. |
The NavbarEnd component is a container for elements that should appear at the end (right side) of the navbar.
| NavbarEnd Props | Type | Description |
|---|---|---|
is | any | Allows changing the element tag. Default is |
| NavbarEnd Slots | Description |
|---|---|
default | The default slot. Content to be displayed at the end of the navbar. |
The NavButton component is a button specifically styled for use in navigation contexts like navbars and menus.
| NavButton Props | Type | Description |
|---|---|---|
active | boolean | Styles the button to appear active or selected. Default is |
disabled | boolean | Styles the button to appear disabled and prevents interaction. Default is |
| NavButton Slots | Description |
|---|---|
default | The default slot. Content to be displayed inside the button. |
A navbar with a brand button and an icon button at the end.
A navbar with a menu icon button, brand, and end icon button.
A navbar with a neutral background and content color.