Docs
NavGroup

NavGroup

A component for grouping and managing navigation elements, supporting collapsibility.

Features

  • Dynamic Navigation Rendering: Renders navigation items based on the navigationKeys array, allowing flexible navigation structures.
  • Collapsible Navigation: Supports a collapsible mode with the isCollabsed prop, ideal for sidebars or top navigation.
  • Flexible Positioning: Can be positioned on the side or top using the position prop for versatile layout options.
  • Custom Button Styling: Utilizes the Button component with custom styling based on the variant, current route, or collapse state.
  • Grouping Navigation Items: Groups navigation items into arrays using the group prop, simplifying management of complex structures.
  • Automatic Route Matching: Automatically applies styles based on the current route to highlight active navigation items.

Installation

npx duck-ui@latest add nav-group

Usage

import { NavGroup, TooltipProvider } from "@/components/ui"
const data = [
  {
    title: 'Home',
    route: '/home',
    children: 'Home',
    icon: <Home />,
    label: {
      children: '21',
    },
  },
  {
    title: 'Calendar',
    route: '/calendar',
    children: 'Calendar',
    icon: <Calendar />,
    label: {
      children: '20',
    },
  },
]
 
export default function App() {
  return (
    <>
      <TooltipProvider>
        <NavGroup<true>
          nav={{
            pathname: '',
            group: group as number[],
            router: {},
            location: {},
            isCollabsed: open,
          }}
          navigationKeys={data}
        />
      </TooltipProvider>
    </>
  )
}

API Reference

NavGroupProps

The NavGroupProps interface defines the properties that can be passed to the NavGroup component.

Key Properties

  • navigationKeys (ButtonProps[]): An array of button configurations for rendering the navigation buttons.
  • nav (NavType<T>): An object containing navigation configuration, including groupings, router, pathname, and more.
  • position (side or top): The position of the navigation group.

NavType

The NavType interface defines the configuration for navigation, including whether it is collapsible.

Key Properties

  • group (number[]): An array defining how many buttons should be grouped together.
  • router (any): Router instance for handling navigation.
  • pathname (string): Current path to highlight active buttons.
  • className (string optional): Optional additional class names for styling the navigation group container.
  • isCollabsed (boolean optional): Indicates if the navigation section is collapsible.

NavCollabsableType

The NavCollabsableType type defines whether the navigation can be collapsible or not.

Key Properties

  • isCollabsed (boolean optional): Indicates if the navigation section is collapsible.

NavCollabsedType

The NavCollabsedType interface is used when the navigation section is collapsible.

Key Properties

  • isCollabsed (boolean optional): Optional property to control collapsing behavior of navigation.

NavNotCollabsedType

The NavNotCollabsedType interface is used when the navigation section is not collapsible.

Key Properties

  • N/A (N/A): This type has no specific properties; used when isCollabsed is not needed.
HeaderTooltip