Dashboard Navbar Component

Mobile bottom navigation for dashboard pages. Displays when screen width < 1024px. Automatically handles navigation with Next.js Link and pathname detection.

Basic Example - 3 Items

Simple navigation with 3 items. All items are visible.

Full Dashboard Example

Complete dashboard navigation with main items and settings items. More than 5 items total, so "More" button appears.

Mobile Simulation

Example in mobile viewport (375px width). Click "More" to see the modal with additional items and expandable subitems.

Dashboard Content

This is the content area. The navbar is fixed at the bottom.

Try it:

Click "More" button to open the modal
Click "Link in Bio" to expand subitems
Click on any navigation item to navigate
Modal closes automatically on navigation

Features

Key Features:

Automatic Navigation: Uses Next.js Link for client-side navigation
Active State Detection: Automatically detects current pathname and highlights active item
Expandable Subitems: Subitems are hidden by default and expand on click
Auto-close on Navigation: Modal closes automatically when navigating to a new page
Smart Overflow: Shows first 4 items + "More" button when more than 5 items
Close Button: Modal has a close button in the header
Reusable: Just pass mainItems and settingsItems - all logic is internal

Responsive Behavior

Guidelines for using Dashboard Navbar with Sidebar.

Usage Rules:

Screen width ≥ 1024px: Use Sidebar for primary navigation
Screen width < 1024px: Replace Sidebar with Dashboard Navbar
Never display both: Sidebar and Navbar should never be visible simultaneously
Consistent state: Active route stays consistent when switching between Sidebar and Navbar

Modal Behavior

Modal Features:

Full Height: Modal takes full height from top to navbar bottom
Sticky Header: Close button and title stay visible when scrolling
Expandable Items: Items with subitems show chevron icon and expand on click
Hidden by Default: Subitems are hidden until parent is clicked
Auto-close: Modal closes when pathname changes (navigation occurs)
Backdrop Click: Clicking backdrop closes the modal

Usage Example

1. Define Navigation Items

// constants/navigation.tsx
import type { DashboardNavbarItem } from '@monorepo/ui';

export const MAIN_NAV_ITEMS: DashboardNavbarItem[] = [
  {
    id: 'dashboard',
    title: 'Dashboard',
    icon: <LayoutDashboard className="size-[18px]" />,
    path: '/dashboard',
  },
  {
    id: 'link-in-bio',
    title: 'Link in Bio',
    icon: <LinkIcon className="size-[18px]" />,
    path: '/dashboard/link-in-bio',
    subitems: [
      { title: 'Links', path: '/dashboard/link-in-bio/links' },
      { title: 'Analytics', path: '/dashboard/link-in-bio/analytics' },
    ],
  },
];

export const SETTINGS_NAV_ITEMS: DashboardNavbarItem[] = [
  {
    id: 'settings',
    title: 'Settings',
    icon: <Settings className="size-[18px]" />,
    path: '/dashboard/settings',
  },
];

2. Use in Component

import { DashboardNavbar } from '@monorepo/ui';
import { MAIN_NAV_ITEMS, SETTINGS_NAV_ITEMS } from './constants';

export function MyDashboardNavbar() {
  return (
    <div style={{ '--navbar-height': '49px' }}>
      <DashboardNavbar
        mainItems={MAIN_NAV_ITEMS}
        settingsItems={SETTINGS_NAV_ITEMS}
      />
    </div>
  );
}

3. Use in Layout (Responsive)

export default function DashboardLayout({ children }) {
  return (
    <div className="flex h-screen">
      {/* Sidebar - visible on desktop */}
      <aside className="hidden lg:block">
        <DashboardSidebar />
      </aside>

      {/* Main content */}
      <main className="flex-1 overflow-auto pb-[49px] lg:pb-0">
        {children}
      </main>

      {/* Navbar - visible on mobile */}
      <div className="lg:hidden">
        <DashboardNavbar
          mainItems={MAIN_NAV_ITEMS}
          settingsItems={SETTINGS_NAV_ITEMS}
        />
      </div>
    </div>
  );
}