The DashboardNavbar component is a responsive navigation bar that integrates with the DashboardSidebar component. It includes a mobile toggle button to enable responsive navigation in dashboard layouts.
Use it inside the header slot of the DashboardPanel component:
<script setup lang="ts">
definePageMeta({
layout: 'dashboard'
});
</script>
<template>
<PDashboardPanel>
<template #header>
<PDashboardNavbar />
</template>
</PDashboardPanel>
</template>
Use the left, default and right slots to customize the navbar.
<script setup lang="ts">
import type { PTabsItem } from 'pohon-ui'
const items: Array<PTabsItem> = [
{
label: 'All',
value: 'all'
},
{
label: 'Unread',
value: 'unread'
}
]
</script>
<template>
<PDashboardNavbar title="Inbox">
<template #leading>
<PDashboardSidebarCollapse />
</template>
<template #trailing>
<PBadge label="4" variant="subtle" />
</template>
<template #right>
<PTabs :items="items" default-value="all" size="sm" class="w-40" :content="false" />
</template>
</PDashboardNavbar>
</template>
Use the title prop to set the title of the navbar.
<template>
<PDashboardNavbar title="Dashboard" />
</template>
Use the icon prop to set the icon of the navbar.
<template>
<PDashboardNavbar title="Dashboard" icon="i-lucide:house" />
</template>
Use the toggle prop to customize the toggle button displayed on mobile that opens the DashboardSidebar component.
You can pass any property from the Button component to customize it.
<template>
<PDashboardNavbar
title="Dashboard"
:toggle="{
color: 'primary',
variant: 'subtle',
class: 'akar:rounded-full',
}"
/>
</template>
Use the toggle-side prop to change the side of the toggle button. Defaults to right.
<template>
<PDashboardNavbar
title="Dashboard"
toggle-side="right"
/>
</template>
| Prop | Default | Type |
|---|
| Slot | Type |
|---|
Below is the theme configuration skeleton for the PDashboardNavbar. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
export default defineAppConfig({
pohon: {
dashboardNavbar: {
slots: {
root: '',
left: '',
icon: '',
title: '',
center: '',
right: '',
toggle: ''
},
variants: {
toggleSide: {
left: {
toggle: ''
},
right: {
toggle: ''
}
}
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
dashboardNavbar: {
slots: {
root: '',
left: '',
icon: '',
title: '',
center: '',
right: '',
toggle: ''
},
variants: {
toggleSide: {
left: {
toggle: ''
},
right: {
toggle: ''
}
}
}
}
}
};