Navigation Configuration

Navbar Navigation

The navigation bar can be customized in two ways:

1. Styling and Layout

Location: src/components/navbar/Navbar.tsx
Customize the visual appearance, layout and behavior of the navigation bar
Modify styles, animations, responsiveness and other UI aspects

2. Navigation Items

Location: src/data/navbarNavigations.ts
Define the navigation menu structure and links
Supports nested dropdown menus up to 2 levels deep
Each navigation item can have:
- Title: Display text
- URL: Link destination
- Child items: Nested dropdown menu items

Navbar Navigation Data Structure

const navbarNavigations = [
  {
    title: 'Home',
    child: [
      { title: 'Market 1', url: '/market-1' },
      { title: 'Market 2', url: '/market-2' },
      { title: 'Fashion 1', url: '/fashion-1' },
      { title: 'Fashion 2', url: '/fashion-2' },
      { title: 'Fashion 3', url: '/fashion-3' },
    ],
  },
  {
    title: 'Pages',
    child: [
      {
        title: 'Sale Page',
        child: [
          { title: 'Version 1', url: '/sale-page-1' },
          { title: 'Version 2', url: '/sale-page-2' },
        ],
      },
      {
        title: 'Vendor',
        child: [
          { title: 'All vendors', url: '/shops' },
          { title: 'Vendor store', url: '/shops/scarlett-beauty' },
        ],
      },
      {
        title: 'Shop',
        child: [
          { title: 'Cart', url: '/cart' },
          { title: 'Checkout', url: '/checkout' },
        ],
      },
      {
        title: 'Auth',
        child: [
          { title: 'Sign In', url: '/login' },
          { title: 'Sign Up', url: '/signup' },
        ],
      },
    ],
  },
  { title: 'Track My Orders', url: '/orders' },
  { title: 'Back to Demos', url: '/' },
]

Categories Navigation

The categories navigation component provides a hierarchical menu structure for organizing products and pages. You can customize both the visual appearance and data structure:

Customization

Modify the component styling and layout in src/components/categories/Categories.tsx
Update the navigation data structure in src/data/navigations.ts

Features

Supports nested category hierarchies
Configurable mega menus with custom layouts
Optional category icons and images
Responsive design for mobile/desktop
URL-based navigation routing

Data Structure

The navigation data follows this TypeScript interface:

const navigation = [
  {
    icon: 'dress',
    title: 'Fashion',
    href: '/fashion',
    menuComponent: 'MegaMenu1',
    menuData: {
      categories: [
        {
          title: 'Man Clothes',
          href: '/product/search/man-clothes',
          subCategories: [
            {
              title: 'Shirt',
              href: '/product/search/shirt',
              imgUrl: '/assets/images/products/categories/shirt.png',
            },
          ],
        },
        {
          title: 'Accessories',
          href: '/product/search/accessories',
          subCategories: [
            {
              title: 'Belt',
              href: '/product/search/belt',
              imgUrl: '/assets/images/products/categories/belt.png',
            },
          ],
        },
      ],
      rightImage: {
        imgUrl: '/assets/images/promotion/offer-1.png',
        href: '/sale-page-1',
      },
    },
  },
 
  {
    icon: 'food',
    title: 'Groceries',
    href: '/product/search/groceries',
    menuComponent: 'MegaMenu1',
  },
 
  {
    icon: 'car',
    title: 'Automotive',
    href: '/product/search/automotive',
    menuComponent: 'MegaMenu1',
  },
 
  {
    icon: 'motorbike',
    title: 'Bikes',
    href: '/product/search/bikes',
    menuComponent: 'MegaMenu2',
    menuData: [
      {
        icon: 'man',
        title: 'Man',
        href: '/product/search/fashion',
        megaMenu: 'MegaMenu1',
        menuData: {
          categories: [
            {
              title: 'Accessories',
              href: '/product/search/accessories',
              subCategories: [
                {
                  title: 'Belt',
                  href: '/product/search/belt',
                  imgUrl: '/assets/images/products/categories/belt.png',
                },
              ],
            },
            {
              title: 'Shoes',
              href: '/product/search/shoes',
              subCategories: [
                {
                  title: 'Sneakers',
                  href: '/product/search/Sneakers',
                  imgUrl: '/assets/images/products/categories/sneaker.png',
                },
              ],
            },
          ],
        },
      },
      {
        icon: 'woman',
        title: 'Woman',
        href: '/product/search/electronics',
        megaMenu: 2,
      },
      {
        icon: 'baby-boy',
        title: 'Baby Boy',
        href: '/product/search/home&garden',
        megaMenu: 3,
      },
      {
        icon: 'baby-girl',
        title: 'Baby Girl',
        href: '/product/search/bikes',
        megaMenu: 'MegaMenu1',
      },
    ],
  },
]

Theme Icons