✨ Overview

Navbar is A flexible, accessible navigation component that supports multiple levels of navigation, responsive design, and theme customization. The Navbar implements a horizontal navigation on desktop and collapsible menu on mobile devices.

Table of Contents

• Usage Guidelines
• Props, Types & Display Variations
• Accessibility
• Scalability

🚀 Usage Guidelines

Basic Usage

This component takes a brand prop that displays your branding at the left side, and an items prop which defines the menu items’ properties.

The component also needs to be wrapped inside the ThemeContext provider so that stylings such as text color or font can be changed globally.

/* types.ts
 *
 interface ThemeConfig {
   theme: 'light' | 'dark';
   font: FontFamily;
   textColor: string;
   backgroundColor: string;
 }
 */

import { Navbar, ThemeContext } from './navbar';
import { ThemeConfig } from './types.ts'

function App() {
  const themeSettings: ThemeConfig = {...}  //or the theme state from your state store
  return (
    <ThemeContext.Provider value={themeSettings}>
      <Navbar 
        brand={{
          logo: <YourLogo />,
          name: "Your Brand",
          href: "/"
        }}
        items={[
          { id: 'home', label: 'Home', displayMode: 'mixed', icon: <HomeIcon/> }, 
          { id: 'prod', label: 'Products', displayMode: 'mixed', icon: <Prod/>,
            subItems: [{ id: 'caty1', label: 'Category 1', href: '/prod/p1'}]}
        ]}
      />
    </ThemeContext.Provider>
  );
}

Customizing Individual menu Items

For specific use cases, such as when an online store wants to highlight the On Sale link in the Navbar, it might be beneficial to override the theme’s default color for these specific items. To do so, simply use the override options in the item object:

{
  textColorOverride: '#ff0000',
  backgroundColorOverride: '#f0f0f0',
  fontOverride: 'Georgia'
  id: 'on-sale',
  label: 'On Sale',
  href: '/on-sale',
  displayMode: 'mixed',
  icon: <OnSaleIcon />,
}

🚀 Props, Types & Display Variations

interface NavbarProps

type NavItem