DXDashboardSidebar

A collapsible sidebar navigation component for Laravel dashboards with support for navigation groups, icons, badges, and active state highlighting.

Live Examples

Show Code

Props

Name Click to sort ascending	Type	Required Click to sort ascending	Default	Description
navigation	Navigation	Yes	-	Navigation structure with groups and items. See Navigation type definition below
currentUrl	string	Yes	-	Current URL for determining active navigation items
collapsed	boolean	No	false	Whether the sidebar rail is collapsed to icons only
title	string	No	Dashboard	Sidebar title shown in the header
collapsibleGroups	boolean	No	false	Turn group headers into accordion toggles that collapse/expand their items
autoCollapseInactiveGroups	boolean	No	true	When collapsibleGroups is on: true opens only the active-route group and closes others when one opens (single-open accordion); false opens all groups and toggles them independently

Events

Name Click to sort ascending	Parameters	Description
toggle	none	Emitted when the sidebar should toggle between collapsed and expanded states

Slots

Name Click to sort ascending	Description	Scoped Props
brand	Custom brand/logo content in the sidebar header. Receives collapsed (boolean) and title (string) as slot props	-
link	Custom navigation link rendering. Receives item (NavigationItem), isActive (boolean), collapsed (boolean), and isExpanded (boolean — whether the containing group is open) as slot props	-
footer	Utility/secondary links pinned to the bottom of the sidebar, below the nav groups. Receives collapsed (boolean) as a slot prop	-

Extended Component

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

Navigation Type

The Navigation type is an array of NavigationGroup objects:

interface NavigationItem {
  label: string;
  url: string;
  icon?: string;              // Icon component or emoji
  badge?: string | number;    // Badge content
  badgeColor?: string;        // Bootstrap colour variant
  active?: boolean;
  visible?: boolean;
}

interface NavigationGroup {
  label?: string;             // Group label (optional)
  items: NavigationItem[];
  collapsible?: boolean;      // Set false to keep this group always expanded when collapsibleGroups is on
  collapsed?: boolean;        // Reserved for a future explicit initial-open hint
  visible?: boolean;
}

type Navigation = NavigationGroup[];

Features

• Collapsible Design: Toggle between expanded and collapsed (icon-only) rail states
• Collapsible Groups: Optional accordion menu groups (collapsibleGroups) — ideal for large menus. With autoCollapseInactiveGroups (default), only the active-route group opens on load and opening one closes the others. Uses a CSS grid height transition (no layout flicker on load)
• Navigation Groups: Organise navigation items into logical groups with labels
• Active State: Automatically highlights active navigation items based on current URL
• Icon Support: Display icons next to navigation items (works with component icons or emojis)
• Badges: Show notification badges on navigation items
• Sticky Positioning: Sidebar stays in view when scrolling
• Custom Scrollbar: Styled scrollbar for better aesthetics
• Flexible Rendering: Use slots to completely customise brand and link rendering