Breadcrumb and Filters Navigation Bar

Reports-focused navigation bar with breadcrumb navigation, date picker, advanced filters, and bookmark functionality. Features hierarchical navigation, date selection, multi-group filtering, and saved items management for analytics dashboards.

Lucide React

date-fns

Loading component...

'use client';import * as React from 'react';import { BookmarkIcon, HomeIcon } from 'lucide-react';import DatePicker from './DatePicker';import Filters from './Filters';import {  Breadcrumb,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbList,  BreadcrumbPage,  BreadcrumbSeparator,} from '@/components/ui/breadcrumb';import { Button } from '@/components/ui/button';import { cn } from '@/lib/utils';// Typesexport interface Navbar15BreadcrumbItem {  href?: string;  label: string;  isCurrentPage?: boolean;}export interface Navbar15Props extends React.HTMLAttributes<HTMLElement> {  breadcrumbItems?: Navbar15BreadcrumbItem[];  showHomeIcon?: boolean;  selectedDate?: Date;  filterGroups?: Array<{    id: string;    label: string;    options: Array<{      id: string;      label: string;      checked?: boolean;    }>;  }>;  savedButtonText?: string;  onBreadcrumbClick?: (href: string) => void;  onDateChange?: (date: Date | undefined) => void;  onFilterChange?: (groupId: string, optionId: string, checked: boolean) => void;  onClearFilters?: () => void;  onSavedClick?: () => void;}// Default breadcrumb itemsconst defaultBreadcrumbItems: Navbar15BreadcrumbItem[] = [  { href: '#', label: 'Home' },  { label: 'Reports', isCurrentPage: true },];export const Navbar15 = React.forwardRef<HTMLElement, Navbar15Props>(  (    {      className,      breadcrumbItems = defaultBreadcrumbItems,      showHomeIcon = true,      selectedDate,      filterGroups,      savedButtonText = 'Saved',      onBreadcrumbClick,      onDateChange,      onFilterChange,      onClearFilters,      onSavedClick,      ...props    },    ref  ) => {    return (      <header        ref={ref}        className={cn(          'border-b px-4 md:px-6 [&_*]:no-underline',          className        )}        {...props}      >        <div className="flex h-16 items-center justify-between gap-4">          {/* Left side */}          <Breadcrumb>            <BreadcrumbList>              {breadcrumbItems.map((item, index) => (                <React.Fragment key={index}>                  <BreadcrumbItem>                    {item.isCurrentPage ? (                      <BreadcrumbPage>{item.label}</BreadcrumbPage>                    ) : (                      <BreadcrumbLink                        href={item.href}                        onClick={(e) => {                          e.preventDefault();                          if (onBreadcrumbClick && item.href) {                            onBreadcrumbClick(item.href);                          }                        }}                        className="cursor-pointer"                      >                        {index === 0 && showHomeIcon ? (                          <>                            <HomeIcon size={16} aria-hidden="true" />                            <span className="sr-only">{item.label}</span>                          </>                        ) : (                          item.label                        )}                      </BreadcrumbLink>                    )}                  </BreadcrumbItem>                  {index < breadcrumbItems.length - 1 && <BreadcrumbSeparator />}                </React.Fragment>              ))}            </BreadcrumbList>          </Breadcrumb>          {/* Right side */}          <div className="flex items-center gap-2">            {/* Date picker */}            <DatePicker               date={selectedDate}              onDateChange={onDateChange}            />            {/* Filters */}            <Filters               filterGroups={filterGroups}              onFilterChange={onFilterChange}              onClearFilters={onClearFilters}            />            {/* Saved button */}            <Button              size="sm"              variant="outline"              className="text-sm max-sm:aspect-square max-sm:p-0"              onClick={(e) => {                e.preventDefault();                if (onSavedClick) onSavedClick();              }}            >              <BookmarkIcon                className="text-muted-foreground/80 sm:-ms-1"                size={16}                aria-hidden="true"              />              <span className="max-sm:sr-only">{savedButtonText}</span>            </Button>          </div>        </div>      </header>    );  });Navbar15.displayName = 'Navbar15';export { DatePicker, Filters };

Installation

npx shadcn@latest add https://www.shadcn.io/registry/navbar-15.json

npx shadcn@latest add https://www.shadcn.io/registry/navbar-15.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/navbar-15.json

bunx shadcn@latest add https://www.shadcn.io/registry/navbar-15.json

Features

Breadcrumb navigation with home icon and hierarchical page structure
Date picker with calendar popup and formatted date display using date-fns
Advanced filters with grouped checkboxes, active filter count, and clear functionality
Saved items button with bookmark icon and responsive design
Home icon integration showing house icon for the first breadcrumb item
Filter management with status and category groups, visual active indicators
Responsive layout with mobile-friendly saved button (icon-only on small screens)
TypeScript support with comprehensive interfaces for breadcrumbs and filters

Use Cases

This free open source React component works well for:

Analytics dashboards - Reporting interfaces with date ranges and data filtering using Next.js
Admin panels - Management systems with breadcrumb navigation and content filtering using TypeScript
Data visualization - Dashboards with date selection and multi-dimensional filtering using Tailwind CSS
Content management - Systems with hierarchical navigation and advanced search capabilities

API Reference

Navbar15

Prop	Type	Default	Description
`breadcrumbItems`	`Navbar15BreadcrumbItem[]`	`defaultBreadcrumbItems`	Array of breadcrumb navigation items
`showHomeIcon`	`boolean`	`true`	Whether to show home icon for first breadcrumb item
`selectedDate`	`Date`	`undefined`	Controlled date picker value
`filterGroups`	`FilterGroup[]`	`defaultFilterGroups`	Array of filter groups with options
`savedButtonText`	`string`	`"Saved"`	Text label for the saved items button
`onBreadcrumbClick`	`(href: string) => void`	`undefined`	Callback for breadcrumb item clicks
`onDateChange`	`(date: Date \| undefined) => void`	`undefined`	Callback for date picker changes
`onFilterChange`	`(groupId: string, optionId: string, checked: boolean) => void`	`undefined`	Callback for filter option changes
`onClearFilters`	`() => void`	`undefined`	Callback for clearing all filters
`onSavedClick`	`() => void`	`undefined`	Callback for saved button clicks

interface Navbar15BreadcrumbItem {
  href?: string;          // Link URL for navigation
  label: string;          // Display text for breadcrumb
  isCurrentPage?: boolean; // Mark as current page (no link)
}

Filter Interface

interface FilterGroup {
  id: string;
  label: string;
  options: FilterOption[];
}

interface FilterOption {
  id: string;
  label: string;
  checked?: boolean;
}

Hierarchical Breadcrumbs - Clear page hierarchy with home icon and separators
Current Page Indicator - Non-interactive current page display in breadcrumb
Responsive Icons - Home icon with screen reader support for accessibility
Click Handling - Prevented default navigation with callback support

Date Selection

Calendar Popup - Full calendar interface with date selection
Formatted Display - Human-readable date format using date-fns
Controlled State - Support for controlled and uncontrolled date values
Clear Interface - Calendar icon with placeholder text when no date selected

Filter System

Grouped Filters - Organized filter options by category (Status, Category, etc.)
Active Count Badge - Visual indicator showing number of active filters
Clear Functionality - One-click clearing of all active filters
Checkbox Interface - Multi-select checkboxes with visual checked states

Implementation Notes

Uses shadcn/ui Breadcrumb component for semantic navigation structure
Date picker integrates Calendar component with Popover for clean interface
Filter system uses DropdownMenuCheckboxItem for accessible multi-selection
Active filter count displayed with Badge component for visual feedback
Bookmark button responsive design shows icon-only on mobile devices
Compatible with shadcn/ui design system and Tailwind CSS styling framework
All interactive elements include proper callback support for application integration
Home icon provides visual hierarchy anchor point with screen reader accessibility

Breadcrumb and Filters Navigation Bar

Installation

Features

Use Cases

API Reference

Navbar15

Filter Interface

Navigation Features

Date Selection

Filter System

Implementation Notes

On this page

Breadcrumb and Filters Navigation Bar

Reactnavbar-15

On this page