O componente DashboardNavbar é uma barra de navegação responsiva que se integra ao componente DashboardSidebar. Ele inclui um botão de alternância para mobile que habilita a navegação responsiva em layouts de dashboard.
Use-o dentro do slot header do componente DashboardPanel:
<script setup lang="ts">
definePageMeta({
layout: 'dashboard'
})
</script>
<template>
<NDashboardPanel>
<template #header>
<NDashboardNavbar />
</template>
</NDashboardPanel>
</template>
Use os slots left, default e right para personalizar a navbar.
Use a prop title para definir o título da navbar.
<template>
<NDashboardNavbar title="Dashboard" />
</template>
Use a prop icon para definir o ícone da navbar.
<template>
<NDashboardNavbar title="Dashboard" icon="i-lucide-house" />
</template>
Use a prop toggle para personalizar o botão de alternância exibido no mobile que abre o componente DashboardSidebar.
Você pode passar qualquer propriedade do componente Button para personalizá-lo.
Use a prop toggle-side para alterar o lado do botão de toggle. O padrão é right.
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
icon | anyThe icon displayed next to the title. | |
title | string | |
toggle | true | boolean | Omit<ButtonProps, LinkPropsKeys> Customize the toggle button to open the sidebar.
|
toggleSide | 'left' | "left" | "right"The side to render the toggle button on. |
ui | { root?: SlotClass; left?: SlotClass; icon?: SlotClass; title?: SlotClass; center?: SlotClass; right?: SlotClass; toggle?: SlotClass; } |
| Slot | Type |
|---|---|
title | {} |
leading | DashboardNavbarSlotsProps & { ui: object; } |
trailing | DashboardNavbarSlotsProps & { ui: object; } |
left | DashboardNavbarSlotsProps |
default | DashboardNavbarSlotsProps |
right | DashboardNavbarSlotsProps |
toggle | DashboardNavbarSlotsProps & { ui: object; } |
export default defineAppConfig({
ui: {
dashboardNavbar: {
slots: {
root: 'h-(--ui-header-height) shrink-0 flex items-center justify-between px-4 sm:px-6 gap-1.5',
left: 'flex items-center gap-1.5 min-w-0',
icon: 'shrink-0 size-5 self-center me-1.5',
title: 'flex items-center gap-1.5 font-semibold text-highlighted truncate',
center: 'hidden lg:flex',
right: 'flex items-center shrink-0 gap-1.5',
toggle: ''
},
variants: {
toggleSide: {
left: {
toggle: ''
},
right: {
toggle: ''
}
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
dashboardNavbar: {
slots: {
root: 'h-(--ui-header-height) shrink-0 flex items-center justify-between px-4 sm:px-6 gap-1.5',
left: 'flex items-center gap-1.5 min-w-0',
icon: 'shrink-0 size-5 self-center me-1.5',
title: 'flex items-center gap-1.5 font-semibold text-highlighted truncate',
center: 'hidden lg:flex',
right: 'flex items-center shrink-0 gap-1.5',
toggle: ''
},
variants: {
toggleSide: {
left: {
toggle: ''
},
right: {
toggle: ''
}
}
}
}
}
})
]
})