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.
Basic Navigation Menu
Dropdown Navigation
<nav class="main-navigation"> {{#linklist.main}} <a href="{{url}}" class="nav-link {{#current}}active{{/current}}"> {{name}} </a> {{/linklist.main}} </nav>
Available Link Lists Linklist Description Usage linklist.mainContains theme’s Main Menu Primary navigation linklist.topContains theme’s Top Menu Utility/secondary navigation linklist.footerContains theme’s Footer Menu Footer navigation
Linklist Properties When looping through linklist.{name}, each link has these properties:
Property Type Description nameString Menu item’s designation urlString Menu item’s link address currentBoolean True if visitor is on the current menu item hasChildrenBoolean Check if menu item has sub-menu items hasChildren2Boolean Check if second sub-menu item has sub-menu items hasChildren3Boolean Check if third sub-menu item has sub-menu items hasChildren4Boolean Check if fourth sub-menu item has sub-menu items childrenArray Object 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> Breadcrumbs Show the navigation path to help users understand their location:
Basic Breadcrumbs
Rich Breadcrumbs
<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>
Breadcrumb Properties When using breadcrumbs:
Property Type Description titleString Display text for this breadcrumb urlString Link URL (empty for current page) lastBoolean True if this is the current/last item
Complete Navigation Examples <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>© {{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>© {{shop.name}}</p> </footer> </body> </html> Next Steps 