Skip to content
Zelta Docs

Navigation Components

Navigation Components

Section titled “Navigation Components”

Purpose

Section titled “Purpose”

Navigation components provide consistent navigation patterns across the application, including vertical navigation menus, breadcrumbs, and navigation lists.

Public API

Section titled “Public API”
Section titled “NavSectionVertical”

Vertical navigation menu with collapsible groups.

interface NavSectionVerticalProps {
  data: NavListProps[];
  sx?: SxProps;
}


interface NavListProps {
  title: string;
  path: string;
  icon?: ReactElement;
  info?: ReactElement;
  caption?: string;
  disabled?: boolean;
  roles?: string[];
  children?: NavListProps[];
}
Section titled “NavSectionHorizontal”

Horizontal navigation menu for top bars.

interface NavSectionHorizontalProps {
  data: NavListProps[];
  sx?: SxProps;
}
Section titled “Breadcrumbs”

Breadcrumb navigation trail.

interface BreadcrumbsProps {
  links: Array<{
    name: string;
    href?: string;
    icon?: ReactElement;
  }>;
  activeLast?: boolean;
}

Usage

Section titled “Usage”

Vertical Navigation

Section titled “Vertical Navigation”
import { NavSectionVertical } from 'src/components/nav-section';


const navConfig = [
  {
    title: 'Dashboard',
    path: paths.home.main,
    icon: <Icon icon="solar:home-bold-duotone" />,
  },
  {
    title: 'Groups',
    path: paths.home.group.main,
    icon: <Icon icon="solar:users-group-rounded-bold-duotone" />,
    children: [
      {
        title: 'My Groups',
        path: paths.home.group.list,
      },
      {
        title: 'Create Group',
        path: paths.home.group.create,
      },
    ],
  },
];


function Sidebar() {
  return <NavSectionVertical data={navConfig} />;
}
Section titled “Breadcrumbs”
import { Breadcrumbs } from 'src/components/breadcrumbs';


function GroupDetailHeader() {
  return (
    <Breadcrumbs
      links={[
        { name: 'Home', href: paths.home.main },
        { name: 'Groups', href: paths.home.group.list },
        { name: group.name },
      ]}
    />
  );
}

Behavior and Constraints

Section titled “Behavior and Constraints”
  • Active state: Automatically highlights current route
  • Collapsible: Sub-menus expand/collapse on click
  • Responsive: Adapts to mobile with drawer component
  • Accessibility: Keyboard navigation and ARIA labels

Testing

Section titled “Testing”
it('should highlight active route', () => {
  render(<NavSectionVertical data={navConfig} />);
  expect(screen.getByText('Dashboard')).toHaveClass('active');
});

Further Reading

Section titled “Further Reading”