> ## Documentation Index
> Fetch the complete documentation index at: https://quickbutik.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Navigation Object

> Build dynamic navigation menus and breadcrumbs using available link lists

The navigation system in Quickbutik provides link lists and breadcrumbs for creating basic menus and navigation elements. These are essential for building site structure and user experience.

<Info>
  **Usage**: Available globally - create main menus, top menus, footer links, and breadcrumbs
</Info>

## Link Lists (Linklist)

Link lists are customizable navigation menus that you can create and manage in your Control Panel. Three predefined link lists are available: main, top, and footer.

<CodeGroup>
  ```mustache Basic Navigation Menu theme={null}
  <nav class="main-navigation">
      {{#linklist.main}}
          <a href="{{url}}" 
             class="nav-link {{#current}}active{{/current}}">
              {{name}}
          </a>
      {{/linklist.main}}
  </nav>
  ```

  ```mustache Dropdown Navigation theme={null}
  <nav class="navbar">
      <ul class="nav-menu">
          {{#linklist.main}}
          <li class="nav-item {{#current}}current{{/current}}">
              <a href="{{url}}" class="nav-link">
                  {{name}}
                  {{#hasChildren}}<i class="dropdown-arrow"></i>{{/hasChildren}}
              </a>
              
              {{#children}}
              <ul class="dropdown-menu">
                  {{#children}}
                  <li><a href="{{url}}" class="dropdown-link">{{name}}</a></li>
                  {{/children}}
              </ul>
              {{/children}}
          </li>
          {{/linklist.main}}
      </ul>
  </nav>
  ```
</CodeGroup>

## Available Link Lists

| Linklist          | Description                  | Usage                        |
| ----------------- | ---------------------------- | ---------------------------- |
| `linklist.main`   | Contains theme's Main Menu   | Primary navigation           |
| `linklist.top`    | Contains theme's Top Menu    | Utility/secondary navigation |
| `linklist.footer` | Contains theme's Footer Menu | Footer navigation            |

### Linklist Properties

When looping through `linklist.{name}`, each link has these properties:

| Property       | Type    | Description                                      |
| -------------- | ------- | ------------------------------------------------ |
| `name`         | String  | Menu item's designation                          |
| `url`          | String  | Menu item's link address                         |
| `current`      | Boolean | True if visitor is on the current menu item      |
| `hasChildren`  | Boolean | Check if menu item has sub-menu items            |
| `hasChildren2` | Boolean | Check if second sub-menu item has sub-menu items |
| `hasChildren3` | Boolean | Check if third sub-menu item has sub-menu items  |
| `hasChildren4` | Boolean | Check if fourth sub-menu item has sub-menu items |
| `children`     | Array   | Object containing sub-menu items                 |

## Multi-Level Navigation

Handle nested menu structures with multiple levels:

<CodeGroup>
  ```mustache Multi-Level Menu theme={null}
  <nav class="multi-level-nav">
      {{#linklist.main}}
      <div class="nav-item {{#current}}active{{/current}}">
          <a href="{{url}}" class="nav-link">{{name}}</a>
          
          {{#hasChildren}}
          <div class="level-1-menu">
              {{#children}}
              <div class="level-1-item">
                  <a href="{{url}}" class="level-1-link">{{name}}</a>
                  
                  {{#hasChildren2}}
                  <div class="level-2-menu">
                      {{#children}}
                      <div class="level-2-item">
                          <a href="{{url}}" class="level-2-link">{{name}}</a>
                          
                          {{#hasChildren3}}
                          <div class="level-3-menu">
                              {{#children}}
                              <a href="{{url}}" class="level-3-link">{{name}}</a>
                              {{/children}}
                          </div>
                          {{/hasChildren3}}
                      </div>
                      {{/children}}
                  </div>
                  {{/hasChildren2}}
              </div>
              {{/children}}
          </div>
          {{/hasChildren}}
      </div>
      {{/linklist.main}}
  </nav>
  ```
</CodeGroup>

## Breadcrumbs

Show the navigation path to help users understand their location:

<CodeGroup>
  ```mustache Basic Breadcrumbs theme={null}
  <nav class="breadcrumbs" aria-label="{{#lang}}Breadcrumb navigation{{/lang}}">
      <ol class="breadcrumb-list">
          {{#breadcrumbs}}
          <li class="breadcrumb-item">
              {{^last}}
                  <a href="{{url}}" class="breadcrumb-link">{{title}}</a>
                  <span class="breadcrumb-separator"> / </span>
              {{/last}}
              {{#last}}
                  <span class="breadcrumb-current" aria-current="page">{{title}}</span>
              {{/last}}
          </li>
          {{/breadcrumbs}}
      </ol>
  </nav>
  ```

  ```mustache Rich Breadcrumbs theme={null}
  <nav class="breadcrumbs-enhanced">
      <div class="breadcrumb-container">
          {{#breadcrumbs}}
              {{^last}}
                  <a href="{{url}}" class="breadcrumb-link">
                      <span class="breadcrumb-text">{{title}}</span>
                  </a>
                  <i class="breadcrumb-separator icon-chevron-right"></i>
              {{/last}}
              
              {{#last}}
                  <span class="breadcrumb-current">
                      <i class="breadcrumb-icon icon-map-marker"></i>
                      <span class="breadcrumb-text">{{title}}</span>
                  </span>
              {{/last}}
          {{/breadcrumbs}}
      </div>
  </nav>
  ```
</CodeGroup>

### Breadcrumb Properties

When using `breadcrumbs`:

| Property | Type    | Description                           |
| -------- | ------- | ------------------------------------- |
| `title`  | String  | Display text for this breadcrumb      |
| `url`    | String  | Link URL (empty for current page)     |
| `last`   | Boolean | True if this is the current/last item |

## Complete Navigation Examples

### Full Header Navigation

<CodeGroup>
  ```mustache Complete Header theme={null}
  <header class="site-header">
      <!-- Top utility bar -->
      {{#linklist.top}}
      <div class="header-utility">
          <div class="container">
              {{#linklist.top}}
                  <a href="{{url}}" class="utility-link {{#current}}active{{/current}}">{{name}}</a>
              {{/linklist.top}}
          </div>
      </div>
      {{/linklist.top}}
      
      <!-- Main header -->
      <div class="header-main">
          <div class="container">
              <!-- Logo -->
              <div class="header-logo">
                  <a href="{{shop.url}}">
                      <h1>{{shop.name}}</h1>
                  </a>
              </div>
              
              <!-- Main navigation -->
              <nav class="header-nav">
                  {{#linklist.main}}
                  <div class="nav-item {{#current}}active{{/current}}">
                      <a href="{{url}}" class="nav-link">{{name}}</a>
                      
                      {{#children}}
                      <div class="mega-menu">
                          <div class="mega-menu-content">
                              {{#children}}
                              <div class="mega-menu-section">
                                  <a href="{{url}}" class="mega-menu-link">{{name}}</a>
                              </div>
                              {{/children}}
                          </div>
                      </div>
                      {{/children}}
                  </div>
                  {{/linklist.main}}
              </nav>
          </div>
      </div>
  </header>
  ```
</CodeGroup>

### Footer Navigation

<CodeGroup>
  ```mustache Complete Footer theme={null}
  <footer class="site-footer">
      <div class="footer-content">
          <div class="container">
              <div class="footer-sections">
                  <!-- Footer links -->
                  {{#linklist.footer}}
                  <div class="footer-section">
                      <h4>{{#lang}}Links{{/lang}}</h4>
                      <ul class="footer-links">
                          {{#linklist.footer}}
                          <li><a href="{{url}}" class="{{#current}}active{{/current}}">{{name}}</a></li>
                          {{/linklist.footer}}
                      </ul>
                  </div>
                  {{/linklist.footer}}
              </div>
          </div>
      </div>
      
      <!-- Footer bottom -->
      <div class="footer-bottom">
          <div class="container">
              <div class="footer-bottom-content">
                  <p>&copy; {{shop.name}}</p>
              </div>
          </div>
      </div>
  </footer>
  ```
</CodeGroup>

### Mobile Navigation

<CodeGroup>
  ```mustache Mobile Menu theme={null}
  <div class="mobile-navigation">
      <button class="mobile-menu-toggle" aria-expanded="false">
          <span class="hamburger-line"></span>
          <span class="hamburger-line"></span>
          <span class="hamburger-line"></span>
          <span class="sr-only">{{#lang}}Toggle navigation{{/lang}}</span>
      </button>
      
      <div class="mobile-menu-overlay">
          <div class="mobile-menu">
              <div class="mobile-menu-header">
                  <h3>{{#lang}}Menu{{/lang}}</h3>
                  <button class="mobile-menu-close" aria-label="{{#lang}}Close menu{{/lang}}">×</button>
              </div>
              
              <nav class="mobile-menu-nav">
                  <!-- Main navigation -->
                  <div class="mobile-nav-section">
                      {{#linklist.main}}
                      <div class="mobile-nav-item">
                          <a href="{{url}}" class="mobile-nav-link {{#current}}active{{/current}}">
                              {{name}}
                              {{#children}}<i class="expand-icon"></i>{{/children}}
                          </a>
                          
                          {{#children}}
                          <div class="mobile-submenu">
                              {{#children}}
                              <a href="{{url}}" class="mobile-submenu-link">{{name}}</a>
                              {{/children}}
                          </div>
                          {{/children}}
                      </div>
                      {{/linklist.main}}
                  </div>
                  
                  <!-- Top menu items -->
                  {{#linklist.top}}
                  <div class="mobile-nav-section">
                      <h4 class="mobile-nav-heading">{{#lang}}Quick Links{{/lang}}</h4>
                      {{#linklist.top}}
                      <a href="{{url}}" class="mobile-utility-link {{#current}}active{{/current}}">
                          {{name}}
                      </a>
                      {{/linklist.top}}
                  </div>
                  {{/linklist.top}}
              </nav>
          </div>
      </div>
  </div>
  ```
</CodeGroup>

## Conditional Navigation

Use global conditionals to show context-specific navigation:

<CodeGroup>
  ```mustache Context-Aware Navigation theme={null}
  <nav class="context-navigation">
      {{#isProduct}}
          <!-- Product page navigation -->
          <div class="product-nav">
              {{#breadcrumbs}}
                  <a href="{{url}}" class="back-link">
                      <i class="icon-arrow-left"></i>
                      {{#lang}}Back to{{/lang}} {{title}}
                  </a>
              {{/breadcrumbs}}
          </div>
      {{/isProduct}}
      
      {{#isCategory}}
          <!-- Category page navigation -->
          <div class="category-nav">
              {{#breadcrumbs}}
                  {{^last}}
                      <a href="{{url}}" class="category-parent">{{title}}</a>
                  {{/last}}
              {{/breadcrumbs}}
          </div>
      {{/isCategory}}
      
      <!-- Always show main navigation -->
      <div class="main-nav">
          {{#linklist.main}}
              <a href="{{url}}" class="nav-item {{#current}}current{{/current}}">{{name}}</a>
          {{/linklist.main}}
      </div>
  </nav>
  ```
</CodeGroup>

## Usage Notes

<Warning>
  **Limited Navigation Objects**: Only three predefined link lists are available (main, top, footer) and basic breadcrumbs. Category navigation, custom link lists, and external link properties are not supported.
</Warning>

## Best Practices

<CardGroup cols={2}>
  <Card title="Accessibility" icon="universal-access">
    Use proper ARIA labels, semantic HTML, and keyboard navigation support
  </Card>

  <Card title="Current State" icon="location-dot">
    Always highlight the current page/section using the current property
  </Card>

  <Card title="Mobile First" icon="mobile">
    Design navigation that works well on small screens first
  </Card>

  <Card title="Nested Levels" icon="sitemap">
    Use hasChildren properties to check for sub-menus before rendering
  </Card>
</CardGroup>

## Complete Navigation Template

<CodeGroup>
  ```mustache Full Navigation System theme={null}
  <!DOCTYPE html>
  <html>
  <head>
      <title>{{seo.title}}</title>
  </head>
  <body>
      <!-- Header with navigation -->
      <header class="site-header">
          {{#linklist.top}}
          <div class="top-bar">
              {{#linklist.top}}
                  <a href="{{url}}" class="top-link {{#current}}active{{/current}}">{{name}}</a>
              {{/linklist.top}}
          </div>
          {{/linklist.top}}
          
          <div class="main-header">
              <a href="{{shop.url}}" class="logo">{{shop.name}}</a>
              
              <nav class="main-nav">
                  {{#linklist.main}}
                      <a href="{{url}}" class="nav-link {{#current}}active{{/current}}">
                          {{name}}
                      </a>
                  {{/linklist.main}}
              </nav>
          </div>
      </header>
      
      <!-- Breadcrumbs -->
      <nav class="breadcrumbs">
          {{#breadcrumbs}}
              {{^last}}<a href="{{url}}">{{title}}</a> > {{/last}}
              {{#last}}<span>{{title}}</span>{{/last}}
          {{/breadcrumbs}}
      </nav>
      
      <!-- Main content -->
      <main class="main-content">
          <!-- Page content here -->
      </main>
      
      <!-- Footer -->
      <footer class="site-footer">
          {{#linklist.footer}}
          <nav class="footer-nav">
              {{#linklist.footer}}
                  <a href="{{url}}" class="footer-link">{{name}}</a>
              {{/linklist.footer}}
          </nav>
          {{/linklist.footer}}
          
          <p>&copy; {{shop.name}}</p>
      </footer>
  </body>
  </html>
  ```
</CodeGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="SEO Object" icon="search" href="/theme-development/global/seo">
    Learn about SEO meta tags and structured data
  </Card>

  <Card title="Shop Object" icon="store" href="/theme-development/global/shop">
    Explore store-wide settings and information
  </Card>

  <Card title="Product Object" icon="box" href="/theme-development/pages/product">
    Display individual product information
  </Card>

  <Card title="Category Object" icon="folder" href="/theme-development/pages/category">
    Build basic category pages
  </Card>
</CardGroup>