Menus

The @anakin-gbit/menus package provides a set of versatile components to build intuitive and responsive navigation systems. Whether you need a horizontal navigation bar, dropdown context menus, or custom menu buttons, this package has you covered.

The components are designed to be modular and customizable, enabling seamless integration into any project while adhering to modern best practices.

npm i @anakin-gbit/menus

Type

The TMenuOption type defines the structure of a menu item, ensuring consistency and flexibility across the @anakin-gbit/menus package. Each menu item can represent a simple link or a parent item with nested submenu options.

type TMenuOption = {
  id: string; // Unique ID for the menu item
  label: string; // Text to display for the menu item
  href?: string; // Optional URL to navigate to when the item is clicked
  children?: TMenuOption[]; // Optional array of submenu items
}

id (string):

A unique identifier for the menu item.

label (string):

The text displayed for the menu item.

href (string, optional):

The URL to navigate to when the menu item is clicked. If not provided, the menu item is treated as a non-link element.

children (TMenuOption[], optional):

An array of submenu options for hierarchical navigation structures.

Example Menu Options with Nested Levels

This example demonstrates a menuOptions array with multiple levels of nesting, suitable for websites with more complex navigation hierarchies.

const menuOptions: TMenuOption[] = [
  {
    id: 'home',
    label: 'Home',
    href: '/',
  },
  {
    id: 'about',
    label: 'About Us',
    href: '/about',
  },
  {
    id: 'services',
    label: 'Services',
    children: [
      {
        id: 'web-dev',
        label: 'Web Development',
        children: [
          {
            id: 'frontend',
            label: 'Frontend Development',
            href: '/services/web-development/frontend',
          },
          {
            id: 'backend',
            label: 'Backend Development',
            href: '/services/web-development/backend',
          },
          {
            id: 'fullstack',
            label: 'Fullstack Development',
            href: '/services/web-development/fullstack',
          },
        ],
      },
      {
        id: 'seo',
        label: 'SEO Optimization',
        children: [
          {
            id: 'onpage-seo',
            label: 'On-Page SEO',
            href: '/services/seo/onpage',
          },
          {
            id: 'offpage-seo',
            label: 'Off-Page SEO',
            href: '/services/seo/offpage',
          },
        ],
      },
      {
        id: 'marketing',
        label: 'Digital Marketing',
        children: [
          {
            id: 'social-media',
            label: 'Social Media Marketing',
            href: '/services/marketing/social-media',
          },
          {
            id: 'email',
            label: 'Email Marketing',
            href: '/services/marketing/email',
          },
          {
            id: 'content',
            label: 'Content Marketing',
            href: '/services/marketing/content',
          },
        ],
      },
    ],
  },
  {
    id: 'contact',
    label: 'Contact',
    children: [
      {
        id: 'snail-mail',
        label: 'Snail mail',
        href: '/contact/smail-mail',
      },
      {
        id: 'email',
        label: 'Email',
        href: '/contact/email',
      },
      {
        id: 'webform',
        label: 'Content Marketing',
        href: '/contact/webform',
      },
    ],
  },
]

This array includes three levels of nesting under the "Services" section. For example:

• Services → Web Development → Frontend Development
• Services → SEO Optimization → On-Page SEO
• Services → Digital Marketing → Social Media Marketing

This array is passed to all of the examples below.

Top-level navigation

The TopNav menu is typically used at the top of every page of a website to navigate between the site's main features. It receives an array of menu options (TMenuOption[]), and displays them in a horizontal list. If a menu item has children, they are passed to a dropdown menu.

Menu Button

A button to trigger a dropdown or menu (e.g., burger menu for mobile devices).

MenuButton uses colors from the active theme.

MenuButton accepts a position prop to indicate where the button should be relative to the menu. Options are 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'

DropDown Menu

A flexible and recursive dropdown menu component that supports nested menu structures, customizable styles, and callback handling when menu options are chosen.

The DropDownMenu component is always rendered. It does not manage its own state, so responsibility for showing or hiding the dropdown lies entirely with the parent component. This is typically achieved using a button (e.g., a burger button) or a navigation menu item (e.g., a TopNav menu option) that toggles the rendering of the DropDownMenu.

The onMenuOptionChosen prop is a callback function invoked whenever a menu option is clicked. It is typically used to close the menu after an option is chosen, whether the action involves navigation or another operation. This approach keeps the DropDownMenu focused on rendering and handling menu items, while state management and other functionality remain the responsibility of the parent component.

DropDownMenu uses colors and styles that can be customized via props or overridden by the consuming component.

Props

The component accepts the following props:

menuItems (TMenuOption[]):

The menu options to render, including nested submenus.

onMenuOptionChosen (() => void):

Callback triggered when a menu option is chosen. Typically used to close the menu or perform another action.

depth (number, optional):

Indicates the depth of the current menu for styling purposes. Defaults to0.

containerClassName (string, optional):

Additional CSS class for the menu container.

containerStyle (React.CSSProperties, optional):

Inline styles for the menu container.

topContainerClassName (string, optional):

Additional CSS class for the top-level container.

topContainerStyle (React.CSSProperties, optional):

Inline styles for the top-level container.

headingClassName (string, optional):

CSS class for menu headings.

headingStyle (React.CSSProperties, optional):

Inline styles for menu headings.

linkClassName (string, optional):

CSS class for menu links.

linkStyle (React.CSSProperties, optional):

Inline styles for menu links.

Styling

Highlighting Menu Headings

This example demonstrates how to apply a custom background color and text color to menu headings to make them stand out.

<DropDownMenu 
  menuItems={menuOptions} 
  headingStyle={{ 
    backgroundColor: '#f0f8ff', 
    color: '#004080', 
    padding: '0.5rem' 
  }} 
/>

Customizing Top-Level Container

This example shows how to use the topContainerStyle prop to add a border and background color to the top-level menu container.

<DropDownMenu 
  menuItems={menuOptions} 
  topContainerStyle={{ 
    border: '2px solid #ccc', 
    backgroundColor: '#fafafa', 
    padding: '1rem' 
  }} 
/>

Context menu

A menu that appears on right-click or specific user interactions.

(TODO)

Tree menu

A vertical hierarchical menu for structured content (e.g., file systems or nested categories).

(TODO)

Menu Divider

A horizontal or vertical divider for separating groups of menu items.

(TODO)

Mega menu

A large dropdown menu containing multiple sections, often used in e-commerce or content-rich websites.

(TODO)

Tab menu

A horizontal tab-based navigation component used to switch between different content sections on the same page.

(TODO)

Breadcrumb menu

A breadcrumb trail for secondary navigation, showing the current page's hierarchy and providing links to parent pages.

(TODO)

Responsive menu

A menu that adapts between TopNav and SideNavbased on screen size, ensuring usability across devices.

(TODO)

Mobile menu

A menu specifically designed for smaller screens, often displayed in a slide-out drawer or collapsible format.

(TODO)

Filter menu

A menu for filtering or applying options, commonly used in search interfaces or e-commerce platforms to refine results.

(TODO)

Action menu

A menu for performing actions, such as a kebab menu (three-dot menu) for quick access to contextual actions on cards or lists.

(TODO)

Hover menu

A menu triggered by hovering over an item, often used for quick navigation or revealing additional details.

(TODO)