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 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>
LinklistDescriptionUsage
linklist.mainContains theme’s Main MenuPrimary navigation
linklist.topContains theme’s Top MenuUtility/secondary navigation
linklist.footerContains theme’s Footer MenuFooter navigation
When looping through linklist.{name}, each link has these properties:
PropertyTypeDescription
nameStringMenu item’s designation
urlStringMenu item’s link address
currentBooleanTrue if visitor is on the current menu item
hasChildrenBooleanCheck if menu item has sub-menu items
hasChildren2BooleanCheck if second sub-menu item has sub-menu items
hasChildren3BooleanCheck if third sub-menu item has sub-menu items
hasChildren4BooleanCheck if fourth sub-menu item has sub-menu items
childrenArrayObject containing sub-menu items

​
Multi-Level Navigation

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>
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>
When using breadcrumbs:
PropertyTypeDescription
titleStringDisplay text for this breadcrumb
urlStringLink URL (empty for current page)
lastBooleanTrue if this is the current/last item

​
Complete Navigation Examples

​
Full Header Navigation

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

​
Mobile Navigation

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

​
Conditional Navigation

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

​
Complete Navigation Template

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