Navigation Component

Modern responsive navigation with dropdowns, mobile menu, and theme variants. Uses the ANTSAND Universal Structure with optional enhanced features.

Parent Modifier Pattern: .antsand-nav-enhanced

ANTSAND navigation uses the parent modifier pattern (same as footer-1, hero-1):

Base: <nav class="antsand-nav"> → Hover-based dropdowns
Enhanced: <nav class="antsand-nav antsand-nav-enhanced"> → Click-based, icons, tabs

Same nested classes work in both modes! The parent modifier controls behavior.

Basic vs Enhanced

Choose the right navigation mode for your needs.

.antsand-nav (Base)
  • Hover-triggered dropdowns
  • Simple link structure
  • Single-level dropdowns
  • Lightweight CSS
  • Best for: Simple sites, blogs
Usage:
<nav class="antsand-nav">
.antsand-nav.antsand-nav-enhanced
  • Click-triggered dropdowns
  • Multi-level sub_menu support
  • Icons + descriptions per item
  • Tabbed dropdown panels
  • Gallery layouts (2-column)
  • Mobile hamburger menu
  • Best for: Apps, dashboards, complex sites
Usage:
<nav class="antsand-nav antsand-nav-enhanced">
Class Alignment: Same Names in Both Modes

The enhanced modifier uses the same nested class names as base nav. This ensures template compatibility:

Element Base Nav Enhanced Nav Status
Menu Item .data-sub-container .data-sub-container ✓ Aligned
Dropdown Panel .data-nested-container .data-nested-container ✓ Aligned
Dropdown Item .data-nested-item .data-nested-item ✓ Aligned
Icon Wrapper .data-nested-img-container .data-nested-img-container ✓ Aligned
Content Wrapper .data-nested-content-wrapper .data-nested-content-wrapper ✓ Aligned

API Data Structure

The api_data structure defines how navigation data must be formatted for the template mapping.

Complete api_data Structure 
{
  "api_data": {
    "header": {
      "title": "String",
      "css_class": "position-absolute",
      "css_style": "width:100%;",
      "logo": {
        "url": "String",
        "image_src": "String",
        "class": "String",
        "style": "String",
        "link": "/"
      },
      "page_title": true
    },
    "data": [
      {
        "css_class": "String",
        "active_link_class": "String",
        "css_style": "String",
        "img_src": "String",
        "title": "String",
        "description": "String",
        "link": "String",
        "sub_menu": [
          {
            "css_class": "String",
            "active_link_class": "String",
            "css_style": "String",
            "img_src": "String",
            "title": "String",
            "description": "String",
            "link": "String",
            "sub_menu": [
              {
                "css_class": "String",
                "active_link_class": "String",
                "css_style": "String",
                "img_src": "String",
                "title": "String",
                "description": "String",
                "link": "String"
              }
            ]
          }
        ]
      }
    ]
  }
}
Header Object - Logo & Branding 
"header": {
  "title": "Site Name",           // Nav title (optional, for accessibility)
  "css_class": "position-absolute", // Nav positioning class
  "css_style": "width:100%;",     // Inline styles
  "logo": {
    "url": "/",                   // Logo click destination
    "image_src": "/img/logo.svg", // Logo image path
    "class": "logo",              // Logo element class
    "style": "height:40px;",      // Logo inline styles
    "link": "/"                   // Alias for url
  },
  "page_title": true              // Show page title in nav
}
Property Type Description
title String Site/nav title for accessibility
css_class String Classes for nav positioning (e.g., position-absolute, position-fixed)
css_style String Inline CSS styles
logo.image_src String Path to logo image
logo.link String URL when logo is clicked
page_title Boolean Whether to display page title
Data Array - Menu Items 
"data": [
  {
    "css_class": "drop-down-container", // Container class (add for dropdowns)
    "active_link_class": "active",      // Class when this link is active
    "css_style": "",                    // Inline styles
    "img_src": "/icons/products.svg",   // Icon for enhanced nav
    "title": "Products",                // Display text
    "description": "Browse our catalog", // Description (enhanced nav only)
    "link": "/products",                // URL destination
    "sub_menu": [                       // Nested dropdown items
      {
        "css_class": "",
        "img_src": "/icons/feature-a.svg",
        "title": "Feature A",
        "description": "Description of feature A",
        "link": "/products/feature-a",
        "sub_menu": []                  // 3rd level nesting supported
      }
    ]
  }
]
Property Type Required Description
title String Yes Menu item display text
link String Yes URL destination
css_class String No Additional classes (use drop-down-container for items with dropdowns)
active_link_class String No Class applied when link matches current URL
img_src String No Icon image path (enhanced nav)
description String No Description text (enhanced nav)
sub_menu Array No Nested menu items (same structure, recursive)
Real Example - Enhanced Navigation 
{
  "api_data": {
    "header": {
      "title": "ANTSAND",
      "css_class": "antsand-nav",
      "css_style": "",
      "logo": {
        "image_src": "/images/logo.svg",
        "class": "logo",
        "link": "/"
      }
    },
    "data": [
      {
        "title": "Products",
        "link": "/products",
        "css_class": "drop-down-container",
        "sub_menu": [
          {
            "img_src": "/icons/databoard.svg",
            "title": "Databoard",
            "description": "Visual content management system",
            "link": "/products/databoard"
          },
          {
            "img_src": "/icons/styles.svg",
            "title": "Styles Framework",
            "description": "Modern CSS framework with SASS",
            "link": "/products/styles"
          },
          {
            "img_src": "/icons/forms.svg",
            "title": "Forms Builder",
            "description": "Drag-and-drop form creation",
            "link": "/products/forms"
          }
        ]
      },
      {
        "title": "Solutions",
        "link": "/solutions",
        "css_class": "drop-down-container",
        "sub_menu": [
          {
            "img_src": "/icons/enterprise.svg",
            "title": "Enterprise",
            "description": "Scalable solutions for large teams",
            "link": "/solutions/enterprise"
          },
          {
            "img_src": "/icons/startup.svg",
            "title": "Startups",
            "description": "Fast deployment for growing businesses",
            "link": "/solutions/startups"
          }
        ]
      },
      {
        "title": "Pricing",
        "link": "/pricing"
      },
      {
        "title": "Contact",
        "link": "/contact"
      }
    ]
  }
}

Enhanced Navigation Classes

Classes for rich dropdown menus. Uses same class names as base nav + state classes.

New: Aligned Class System

Enhanced nav now uses the same nested classes as base nav. Legacy classes (drop-down, ico, desc) still work via @extend mapping.

Recommended Classes (Aligned)

Class Element Description
.data-sub-container Menu item Wrapper for items with dropdowns. Same as base nav.
.data-nested-container Dropdown panel Dropdown container. Hidden by default, shown when parent has .active
.data-nested-container.narrow Dropdown panel Narrower dropdown (400px, 1 column)
.data-nested-container.wide Dropdown panel Wider dropdown (800-900px, 3 columns)
.data-nested-item Dropdown link Individual item with icon + text layout
.data-nested-img-container Icon container 48x48px icon wrapper in dropdown item
.data-nested-content-wrapper Text container Title (h3) + description (p) wrapper
.data-nested-heading Section title Heading within dropdown panel (spans full width)
.caret / .down-caret Caret icon Dropdown indicator arrow. Rotates 180° when active.
.active Container state State class on .data-sub-container when dropdown is open

Legacy Classes (Still Supported)

These classes work via @extend mapping for backward compatibility:

Legacy Class Maps To Notes
.drop-down-container .data-sub-container Extends base nav class
.drop-down .data-nested-container Extends base nav class
.drop-down-item (standalone) Same grid layout as .data-nested-item
.ico (standalone) 48x48px icon wrapper
.desc (standalone) Text container with h5, span, .learn-more
.drop-active .active Both work as state class

Tabbed Dropdowns (Enhanced Only)

Class (New) Legacy Description
.data-nested-tabs .dropdown-tabs Tab buttons container within dropdown
.data-nested-tab .dropdown-tab Individual tab button. Add .active for selected state.
.data-nested-tab-content .dropdown-tab-content Tab panel content. Add .active to show.

Mobile Navigation

Class Description
.mobile_toggle Hamburger menu button. Add .active for X state.
.antsand-nav-container Mobile menu container. Add .nav-open to show.

DOM Structure

Visual hierarchy showing aligned class names in both Base and Enhanced modes.

.antsand-nav .antsand-nav-enhanced ← Add modifier for enhanced features │ ├── .header-container ← Logo section (same in both) │ └── .logo │ └── img │ ├── .mobile_toggle ← Hamburger (enhanced only) │ └── i (x3) │ └── .data-container ← Menu section (same in both) └── .data-sub-container ← Menu item (SAME CLASS!) ├── a ← Menu link │ └── .caret ← Dropdown arrow │ └── .data-nested-container ← Dropdown (SAME CLASS!) ├── .data-nested-heading ← Section title └── .data-nested-item ← Item (SAME CLASS!) ├── .data-nested-img-container │ └── img └── .data-nested-content-wrapper ├── h3 ← Title └── p ← Description

Key: Blue = Parent nav | Orange = Header | Green = Data (same in base + enhanced) | Yellow = Enhanced-only

.antsand-nav ← Parent (legacy class names) │ ├── .header-container │ └── .logo │ └── img │ ├── .mobile_toggle │ └── i (x3) │ └── .data-container └── .drop-down-container ← Legacy: extends .data-sub-container ├── a │ └── .down-caret │ └── .drop-down ← Legacy: extends .data-nested-container └── .drop-body ├── .drop-down-heading └── .industry.gallery-2 └── .drop-down-item ├── .ico │ └── img └── .desc ├── h5 ├── span └── .learn-more

Legacy classes still work via @extend mapping but new projects should use aligned classes.

Basic Navigation Classes

Core classes from _nav-v2.scss for simple hover-based navigation.

Class Element Description
.antsand-nav <section> Main nav wrapper. Controls all styling.
.header-container <div> Contains the logo/brand section
.logo <a> Logo wrapper with link to home
.data-container <div> Menu items container (flex, right-aligned)
.data-sub-container <div> Individual menu item
.data-nested-container <div> Hover dropdown (basic nav)
.data-nested-item <a> Dropdown menu item link

Theme Modifiers

Modifier Class Description
.antsand-nav--dark Dark background (default)
.antsand-nav--light White background with shadow, dark text
.antsand-nav--transparent Transparent background, no shadow
.antsand-nav--fixed Fixed position at top of viewport
.antsand-nav--sticky Sticky position (sticks on scroll)

File References

Source files for the navigation component.

File Path Purpose
Main Entry styles_antsand/sass_v2/antsand-v2-nav.scss Entry point, imports both nav modules
Basic Nav styles_antsand/sass_v2/_nav-v2.scss Core nav styles, hover dropdowns
Enhanced Nav styles_antsand/sass_v2/_nav-v2-enhanced.scss Click dropdowns, icons, tabs, mobile
Compiled CSS styles_antsand/css/antsand-v2-nav.css Production CSS (includes both)