DXDashboardNavbar

A responsive top navigation bar component for Laravel dashboards with user menu, search functionality, and sidebar toggle.

Props

Name Click to sort ascending	Type	Required Click to sort ascending	Default	Description
`user`	`{ name: string; email: string; [key: string]: any } \| null`	No	`null`	Current user object with name and email
`pageTitle`	`string`	No	`Dashboard`	Page title displayed in the navbar
`searchAlign`	`'start' \| 'center'`	No	`'start'`	Horizontal alignment of the search slot content within its region: flush left (start) or centred (center). The region is inline in the bar from md up, its own full-width row below
`actionsOnMobile`	`'wrap' \| 'hide'`	No	`'wrap'`	What the actions slot does below md: wrap moves it to its own full-width row (the bar grows), hide removes it entirely (for apps that relocate page actions into the page on phones)
`userMenuLabel`	`string`	No	`'User menu'`	Accessible name for the user-menu trigger. Without one, a screen reader announces it as the avatar's initial rather than as a menu

Height note: on desktop the bar is exactly 64px (aligned with the sidebar header) as long as single-row content stays within its 48px budget (64px minus the bar’s padding) — default-size buttons and inputs fit. Taller content (e.g. btn-lg, or a tall custom user-menu slot) makes the bar grow past 64px, so it no longer lines up with the sidebar header.

Events

Name Click to sort ascending	Parameters	Description
`toggle-sidebar`	none	Emitted when the hamburger menu is clicked to toggle the sidebar

Slots

Name Click to sort ascending	Description	Scoped Props
`menu-icon`	Custom hamburger menu icon (default: three horizontal lines SVG)	-
`search`	Search input or component. Aligned per searchAlign within its region; drops to its own full-width row below the md breakpoint	-
`actions`	Page-level primary actions (e.g. a Create button). Right-aligned next to the user menu from md up; below, wraps to its own full-width row or is hidden entirely per actionsOnMobile. Receives pageTitle as slot prop	-
`user-menu`	Complete custom user menu (replaces default dropdown). Receives user as slot prop	-
`user-icon`	Custom user avatar/icon (defaults to DXUserAvatar). Receives initial (first letter of name) and user as slot props. To decorate the default avatar rather than replace it — e.g. add an unread dot — render DXUserAvatar in the slot so the styling comes with it	-
`user-menu-items`	Custom dropdown menu items for the user dropdown. Receives user as slot prop	-

Extended Component

This is a custom component that extends beyond simple Bootstrap Vue Next wrappers, providing additional functionality specific to Laravel dashboards.

Features