Navigation Object

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.

Usage: Available globally - create main menus, top menus, footer links, and breadcrumbs

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.

<nav class="main-navigation">
    {{#linklist.main}}
        <a href="{{url}}" 
           class="nav-link {{#current}}active{{/current}}">
            {{name}}
        </a>
    {{/linklist.main}}
</nav>

<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>

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

Handle nested menu structures with multiple levels:

<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>

Breadcrumbs

Show the navigation path to help users understand their location:

<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>

<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>

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

<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>

<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>

<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>

Use global conditionals to show context-specific navigation:

<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>

Usage Notes

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.

Best Practices

Accessibility

Use proper ARIA labels, semantic HTML, and keyboard navigation support

Current State

Always highlight the current page/section using the current property

Mobile First

Design navigation that works well on small screens first

Nested Levels

Use hasChildren properties to check for sub-menus before rendering

<!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>

Next Steps

SEO Object

Learn about SEO meta tags and structured data

Shop Object

Explore store-wide settings and information

Product Object

Display individual product information

Category Object

Build basic category pages

Getting Started

Template Language

Global Objects

Page Objects

Link Lists (Linklist)

Available Link Lists

Linklist Properties

Multi-Level Navigation

Complete Navigation Examples

Full Header Navigation

Footer Navigation

Mobile Navigation

Conditional Navigation

Usage Notes

Best Practices

Accessibility

Current State

Mobile First

Nested Levels

Complete Navigation Template

Next Steps

SEO Object

Shop Object

Product Object

Category Object

​Link Lists (Linklist)

​Available Link Lists

​Linklist Properties

​Multi-Level Navigation

​Breadcrumbs

​Breadcrumb Properties

​Complete Navigation Examples

​Full Header Navigation

​Footer Navigation

​Mobile Navigation

​Conditional Navigation

​Usage Notes

​Best Practices

Accessibility

Current State

Mobile First

Nested Levels

​Complete Navigation Template

​Next Steps

SEO Object

Shop Object

Product Object

Category Object

Link Lists (Linklist)

Available Link Lists

Linklist Properties

Multi-Level Navigation

Breadcrumbs

Breadcrumb Properties

Complete Navigation Examples

Full Header Navigation

Footer Navigation

Mobile Navigation

Conditional Navigation

Usage Notes

Best Practices

Complete Navigation Template

Next Steps