AccordionWithSearch

A searchable accordion navigation menu. Parent items expand to reveal children. Search filters both top-level items and their children in real time.

Import

import { AccordionWithSearch } from '@adjanour/react-components'
import '@adjanour/react-components/accordion.css'

Live Example

Try typing in the search box to filter items, then click to expand:

Custom Items

const items: AccordionItemType[] = [
  { title: 'Dashboard', path: '/dashboard' },
  {
    title: 'Projects',
    children: [
      { title: 'Active', path: '/projects/active' },
      { title: 'Archived', path: '/projects/archived' },
    ],
  },
  { title: 'Help', path: '/help' },
]

<AccordionWithSearch items={items} />

With React Router

import { NavLink } from 'react-router-dom'

<AccordionWithSearch
  renderLink={(item, children) => (
    <NavLink to={item.path!}>{children}</NavLink>
  )}
/>

With Next.js

'use client'
import Link from 'next/link'

<AccordionWithSearch
  renderLink={(item, children) => (
    <Link href={item.path!}>{children}</Link>
  )}
/>

Props

Prop	Type	Default	Description
items	AccordionItemType[]	Built-in defaults	Menu items
className	string	''	Additional CSS class
renderLink	(item, children) => ReactNode	<a>	Custom link renderer

AccordionItemType

interface AccordionItemType {
  title: string
  icon?: ReactNode
  path?: string
  children?: AccordionItemType[]
}

Theming

Override CSS custom properties on .aw-accordion or a wrapper class:

.my-nav {
  --aw-bg: #f8fafc;
  --aw-text: #0f172a;
  --aw-radius: 8px;
  --aw-ring-color: #a78bfa;
  max-width: 400px;
}