Navigation Mechanisms Demo

Genesis Ontology v2.3.0 - Contemporary Website Navigation Patterns

1. Pagination Controls

Numbered page navigation with prev/next controls using genesis-synapse('paginate')

View SCSS Implementation

.pagination-demo {
  @include genesis-environment('navigation-pagination');

  .page-link {
    @include genesis-synapse('paginate');
  }
}

2. Breadcrumb Navigation

Hierarchical path navigation using genesis-environment('navigation-breadcrumb')

View SCSS Implementation

.breadcrumb-demo {
  @include genesis-environment('navigation-breadcrumb');

  .breadcrumb-item {
    @include genesis-synapse('navigate');
  }
  
  .current-page {
    @include genesis-cognition('motive');
    @include genesis-state('active');
  }
}

3. Tab Navigation

Horizontal content switching using genesis-synapse('tab')

Product Overview

This is the overview content panel. It contains general information about the product.

View SCSS Implementation

.tabs-demo {
  .tab-list {
    @include genesis-environment('navigation-tabs');
  }

  .tab-button {
    @include genesis-synapse('tab');
  }
  
  .tab-panel {
    @include genesis-entity('primary');
  }
}

4. Accordion Navigation (FAQ)

Collapsible content sections using genesis-synapse('toggle')

The Genesis Ontology System is a three-tier semantic design architecture that separates content from presentation, enabling consistent styling across all ASISaga subdomains.

Navigation mixins provide semantic roles for different interaction patterns, automatically applying responsive styling, accessibility attributes, and touch target optimization.

Yes! All navigation patterns follow WCAG 2.5.5 guidelines with minimum 44px touch targets on mobile and responsive layouts that adapt to viewport size.

View SCSS Implementation

.accordion-demo {
  @include genesis-environment('navigation-accordion');

  .accordion-toggle {
    @include genesis-synapse('toggle');
    @include genesis-cognition('motive');
  }
  
  .accordion-content {
    @include genesis-cognition('discourse');
    @include genesis-state('expanded');
    
    &.collapsed {
      @include genesis-state('collapsed');
    }
  }
}

5. Sidebar Navigation

Vertical navigation menu using genesis-environment('navigation-sidebar')

Main content area appears here alongside the sidebar navigation.

View SCSS Implementation

.sidebar-demo {
  @include genesis-environment('navigation-sidebar');

  .nav-link {
    @include genesis-synapse('navigate');
    
    &[aria-current="page"] {
      @include genesis-state('active');
    }
  }
  
  .section-title {
    @include genesis-cognition('motive');
  }
}

6. Footer Navigation

Multi-column footer links using genesis-environment('navigation-footer')

View SCSS Implementation

.footer-demo {
  @include genesis-environment('navigation-footer');

  .column-title {
    @include genesis-cognition('motive');
  }
  
  .footer-link {
    @include genesis-synapse('navigate');
  }
  
  .social-link {
    @include genesis-synapse('social');
  }
}

7. Multi-Step Wizard/Stepper

Process navigation using genesis-synapse('step')

View SCSS Implementation

.stepper-demo {
  @include genesis-environment('navigation-breadcrumb');

  .wizard-step {
    @include genesis-synapse('step');
  }
}

8. Table of Contents (Anchor Navigation)

In-page anchor links using genesis-synapse('anchor')

View SCSS Implementation

.toc-demo {
  @include genesis-environment('navigation-sidebar');

  .toc-title {
    @include genesis-cognition('motive');
  }
  
  .toc-link {
    @include genesis-synapse('anchor');
  }
  
  .back-to-top {
    @include genesis-synapse('anchor');
  }
}