Skip to main content

​
Overview

The header component provides the main navigation structure for your store, including the top navigation bar with language/currency selector, search functionality, and the main navigation with logo and menu.

​
Location

src/views/components/header/header.twig

​
Available variables

The header component receives these variables:
​
cart
object
Shopping cart information
​
cart.items_count
integer
Number of items in cart
​
cart.total
string
Formatted cart total (e.g., “١٠٠ ر.س”)

​
Configuration options

The header behavior is controlled by theme settings:
​
header_is_sticky
boolean
default:true
Fix the main navigation at the top when scrolling. It’s recommended to disable this if you have many dropdown menu items.
​
topnav_is_dark
boolean
default:false
Apply dark theme to the top navigation bar
​
important_links
boolean
default:true
Display important page links in the top bar (landing pages, blog, custom pages)
​
enable_more_menu
boolean
default:true
When enabled, extra links appear in a “More” dropdown menu when there’s insufficient space

​
Structure

​
Top navigation

The top navbar includes:
  • Footer menu links (when important_links is enabled)
  • Language and currency selector
  • Store scopes/branches selector
  • Search bar
  • Contact information
The main navigation bar contains:
  • Mobile menu toggle button
  • Store logo with proper heading tags (h1 on homepage, h2 on other pages)
  • Custom main menu component
  • User menu (avatar for logged-in users, login button for guests)
  • Cart summary with item count

​
Usage example

{% component 'header.header' %}

​
Customization

You can access theme settings in your custom code: 
{% set important_links = theme.settings.get('important_links') %}
{% set header_is_sticky = theme.settings.get('header_is_sticky', true) %}

​
Components used

The header includes these Salla web components:
  • <salla-menu>: Renders store menus
  • <salla-localization-modal>: Language and currency selector
  • <salla-search>: Product search functionality
  • <salla-contacts>: Contact information display
  • <salla-user-menu>: User account menu
  • <salla-cart-summary>: Shopping cart summary
  • <custom-main-menu>: Custom main menu implementation

​
Accessibility

  • Logo includes proper alt text and semantic heading tags
  • Menu button includes aria-label for screen readers
  • Proper role attributes for navigation elements
The sticky header feature adds a shadow and fixed positioning when scrolling. This is controlled via JavaScript based on the header_is_sticky setting.

Build docs developers (and LLMs) love

Get started for freeTalk to us