Základní layout hlavičky

Rozdělení hlavičky na vrchní a spodní část (header__top, header__bottom) podle potřeby (většinou na e-shopech).

Komponenty pojmenováváme stylem grandparent__child, parent__child. Použítí "__" vícekrát je podle zápisu BEM špatně.

Skrytí určítých částí na telefonu se dá snadno udělat přes 2 třídy - header__mobile-part, header__desktop-part.

Základní rozvržení hlavičky

{* Header - Simple *}

<header class="header js--header">
    <div class="header__content --content --flex">

    </div>
</header>

{* Header - Advanced *}

<header class="header js--header">
    <div class="header__top">
        <div class="header__content --content --flex">

        </div>
    </div>


    <div class="header__bottom">
        <div class="header__content --content --flex">

        </div>
    </div>
</header>

Jak například vypadá header top?

 <div class="header__top --flex-centre-y">

            {* Header | Logo *}
            <div class="header__logo --flex-inline header__desktop-part">
                <a class="header__logo-link" href="/{$lang}">
                    <img class="header__logo-img" src="/img/logo.svg"
                         alt="{$web['DEFAULT_TITLE']}">
                </a>
            </div>

           {* Header | Menu *}

            <div class="header__menu">
                {include 'menu.latte', nav => $nav}
            </div>

			{* Header | Call *}

            <div class="header__call --flex-centre-y">
                <div class="header__call-content --flex --flex-nowrap">
                    <a class="header__call-link --flex --flex-centre icon icon--phone"
                       href="tel:{$web['PER_PHONE']}{$web['PHONE']}">
                        {$web['PER_PHONE']}
                        <b>{$web['PHONE']}</b>
                    </a>

                    <span class="header__call-text">
						{$web['OPEN_HOURS']|noescape}
					</span>
                </div>
            </div>

		    {* Header | Language *}

            <div class="header__lang --flex-inline --flex-centre-y" n:if="count($activeLangs) > 1">
                {include 'lang.latte'}
            </div>

        </div>

Jak například vypadá header bottom?

{* Header | Bottom *}
        <div class="header__bottom --flex-inline --flex-centre-y">
            <div class="--w-12 --w-l-3 header__column header__column--left header__desktop-part">

                <a href="#" class="header__button button button--brand">

                    <div class="header__button-bar-wrap">
                        <span class="header__button-bar"></span>
                        <span class="header__button-bar"></span>
                        <span class="header__button-bar"></span>
                    </div>
                    {$web['HEADER_CHOOSE_CATEGORY']}
                </a>

                {* Header | Menu *}
                <div class="header__menu">
                    {include 'menu.latte', nav => $categories}
                </div>
            </div>

            <div class="--w-12 --w-l-9 --flex
            header__column header__column--right">

                {* Header | Search *}

                <div class="header__search header__desktop-part --flex-inline --flex-centre-y icon icon--search">
                    {form search class => "header__search-form"}
                        <input n:name="search_text"
                                data-use="typeahead"
                                placeholder="{$web['SEARCH_PLACEHOLDER']}"
                                class="header__search-input"
                                type="text">
                        <button class="button header__search-button js--header-search">
                            {$web['HEADER_SEARCH']}
                        </button>
                    {/form}
                </div>


                {* Header | Logo *}
                 <div class="header__logo --flex-inline header__mobile-part">
                    <a class="header__logo-link" href="/{$lang}">
                        <img class="header__logo-img" src="/img/logo.svg"
                             alt="{$web['DEFAULT_TITLE']}">
                    </a>
                </div>


			    {* Header | Search *}

                <div class="header__search-toggle --flex-inline --flex-centre-y header__desktop-part">
                    <button class="header__search-toggle-button icon icon--search --hide-text js--header-search-toggle">
                        {$web['HEADER_SEARCH']}
                    </button>
                </div>


			    {* Header | Login *}

                <a href="#" class="header__login icon icon--user"></a>

                {* Header | Basket *}
                <a class="header__basket" href="#">
                    <div class="header__basket-icon icon icon--cart">
                        <span class="header__basket-count">1500</span>
                    </div>
                    <span class="header__basket-price">1 565 Kč</span>
                </a>


                <div class="header__mobile-part">
                    <a href="#" class="header__button button button--brand">

                        <div class="header__button-bar-wrap">
                            <span class="header__button-bar"></span>
                            <span class="header__button-bar"></span>
                            <span class="header__button-bar"></span>
                        </div>

                        Menu
                    </a>

                    {* Header | Menu *}
                    <div class="header__menu">
                        {include 'menu.latte', nav => $categories}
                        {include 'menu.latte', nav => $nav}
                    </div>
                </div>


            </div>

            <div class="--w-12 header__mobile-part">
                <div class="header__search --flex-inline --flex-centre-y icon icon--search">
                    {form search class => "header__search-form"}
                        <input n:name="search_text"
                                data-use="typeahead"
                                placeholder="{$web['SEARCH_PLACEHOLDER']}"
                                class="header__search-input"
                                type="text">
                        <button class="button header__search-button js--header-search">
                            {$web['HEADER_SEARCH']}
                        </button>
                    {/form}
                </div>
            </div>
        </div>