Components
Navbar
Build a top navigation bar with brand, links, avatar, and a sidebar toggle.
UiNavbar is a composable top navigation bar. Assemble it from brand, nav, link, avatar, and toggle sub-components.
Build a navbar
<script setup lang="ts">
import { NuxtLink } from '#components'
</script>
<template>
<UiNavbar sticky aria-label="Main navigation">
<UiNavbarBrand :as="NuxtLink" to="/" text="Acme" logo="/logo.svg" />
<UiNavbarNav position="start">
<UiNavbarItem>
<UiNavbarLink :as="NuxtLink" to="/docs" text="Docs" />
</UiNavbarItem>
<UiNavbarItem>
<UiNavbarLink :as="NuxtLink" to="/pricing" text="Pricing" />
</UiNavbarItem>
</UiNavbarNav>
<UiNavbarNav position="end">
<UiNavbarAvatar src="/me.jpg" alt="Account" @click="openMenu" />
</UiNavbarNav>
</UiNavbar>
</template>
Toggle a sidebar
UiNavbarToggle pairs with UiSidebar's open state:
<template>
<UiNavbarToggle :collapsed="open" controls="main-sidebar" @toggle="open = !open" />
</template>
UiNavbar props
| Prop | Type | Default | Description |
|---|---|---|---|
sticky | boolean | false | Sticky positioning. |
fluid | boolean | false | Fluid (full-width) container. |
ariaLabel | string | 'Main navigation' | Landmark name. |
Sub-components
| Component | Key props |
|---|---|
UiNavbarBrand | logo, initials, text, as, to / href |
UiNavbarNav | position ('start' / 'end') |
UiNavbarItem | customClass |
UiNavbarLink | text, icon, to / href, as, active |
UiNavbarTitle | title |
UiNavbarAvatar | src, alt, size ('sm' / 'navbar'); emits click |
UiNavbarToggle | collapsed, controls, collapseText, expandText; emits toggle |
UiNavbarCollapse, UiNavbarMobileMenu | customClass |