Net7 UI Kit

Header Top bar component: Has Image Link Right 

<div class="n7-top-bar flex items-center n7-background-02 py-1 md:py-2 px-4 hidden lg:flex">
    <div class="n7-top-bar__container n7-container mx-auto flex items-center lg:flex-1">

        <div class="n7-top-bar__navigation grid lg:flex items-center gap-2 lg:gap-8">

            <!-- Secondary nav/menu component -->
            <nav aria-label="Secondaria">
                <ul class="n7-secondary-navigation grid lg:flex gap-4">

                    <li class="">
                        <a href="" class="n7-link p-2 text-xs lg:text-sm n7-content-01">
                            voce 1

                        </a>
                    </li>

                    <li class="">
                        <a href="" class="n7-link p-2 text-xs lg:text-sm n7-content-01">
                            voce 2

                        </a>
                    </li>

                </ul>
            </nav>

        </div>

        <div class="n7-top-bar__utilities-area flex ml-auto">

            <div class="n7-flex n7-gap-4 n7-items-center">

                <a href="#" class="n7-link">
                    <img src="/images/logo.png" alt="Brand link" width="147" height="28" srcset="/images/logo.png 1x, /images/logo@2x.png 2x">
                </a>

            </div>

            <!-- Social links component -->

            <div class="n7-social-links grid gap-1 md:flex md:gap-6">

                <ul id="headerSocial" class="flex items-center gap-4 p-2 lg:p-0">

                    <li class="flex items-center">
                        <a href="" class="n7-link
     text-2xl n7-content-01 p-2 xl:p-1 n7-link--lg
">
                            <span class="sr-only">Vai al profilo Facebook di ???</span>

                            <svg class="n7-icon inline-block align-middle fill-current w-8 h-8 lg:w-6 lg:h-6" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#solid--facebook" />
                            </svg>

                        </a>
                    </li>

                    <li class="flex items-center">
                        <a href="" class="n7-link
     text-2xl n7-content-01 p-2 xl:p-1 n7-link--lg
">
                            <span class="sr-only">Vai al profilo Instagram di ???</span>

                            <svg class="n7-icon inline-block align-middle fill-current w-8 h-8 lg:w-6 lg:h-6" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#solid--instagram" />
                            </svg>

                        </a>
                    </li>

                    <li class="flex items-center">
                        <a href="" class="n7-link
     text-2xl n7-content-01 p-2 xl:p-1 n7-link--lg
">
                            <span class="sr-only">Vai al canale YouTube di ???</span>

                            <svg class="n7-icon inline-block align-middle fill-current w-8 h-8 lg:w-6 lg:h-6" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#solid--youtube" />
                            </svg>

                        </a>
                    </li>

                </ul>

            </div>

            <div class="w-1e flex mx-6 hidden lg:block">
                <img class="w-full h-auto" src="/images/vertical-divider.svg" alt="">
            </div>

            <!-- Language Selctor component -->
            <div class="px-4">Lingua</div>

            <!-- Search component -->
            <div class="hidden lg:block">
                <button type="button" id="searchModalTrigger" class="n7-btn n7-btn--secondary n7-btn--icon rounded-full w-6 h-6 md:w-10 md:h-10">
                    <span class="sr-only">Cerca nel sito - apri la modale</span>
                    <svg class="n7-icon inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5" aria-hidden="true" focusable="false" role="img">
                        <use href="../../icons.svg#mini--magnifying-glass" />
                    </svg>

                </button>

                <!-- Search Modal -->
                <div id="searchModal" class="fixed items-center content-center inset-0 bg-black bg-opacity-50 overflow-y-auto h-full w-full" style="display:none;" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="modalTitle">

                    <div class="relative h-full lg:h-full lg:w-full mx-auto p-6 lg:p-16 shadow-lg bg-white">
                        <div class="container n7-modal-content px-16 grid gap-14">
                            <div class="flex justify-between items-center">
                                <h2 id="modalTitle" class="text-3xl md:text-5xl lg:text-6xl">Cerca nel sito</h2>
                                <button id="closeModal" class="n7-btn n7-btn--icon border-0 hover:n7-background-primary hover:text-white">
                                    <span class="sr-only">Chiudi</span>
                                    <svg class="n7-icon inline-block align-middle fill-current w-8 h-8" aria-hidden="true" focusable="false" role="img">
                                        <use href="../../icons.svg#mini--x-mark" />
                                    </svg>

                                </button>
                            </div>

                            <form role="search" class="flex gap-2">
                                <div class="n7-input-field gap-1 flex-1 ">
                                    <label for="inputSearch" class="n7-input-field__label">
                                        Cerca servizi, informazioni, aiuti...

                                    </label>

                                    <div class="n7-input has-icon">

                                        <svg class="n7-icon inline-block align-middle fill-current n7-input__icon" aria-hidden="true" focusable="false" role="img">
                                            <use href="../../icons.svg#mini--magnifying-glass" />
                                        </svg>

                                        <input id="inputSearch" class="text-sm n7-input-placeholder" type="search" placeholder="Cerca">
                                    </div>

                                </div>
                                <button type="button" class="n7-btn 
    n7-btn--icon-right group/button n7-btn--primary self-end">

                                    Cerca nel sito

                                    <svg class="n7-icon inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 transition-all duration-200 ease-out transform group-hover/button:translate-x-1" aria-hidden="true" focusable="false" role="img">
                                        <use href="../../icons.svg#mini--chevron-right" />
                                    </svg>

                                </button>

                            </form>

                        </div><!-- /END MODAL CONTENT -->
                    </div>

                </div>
            </div><!--/ END SEARCH WRAPPER -->

        </div>
        <!--/ END TOP BAR UTILITIES -->

    </div>
</div><!-- /END TOPBAR -->
 
<div class="n7-top-bar{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock classes %}{% if bgColor %} {{ bgColor }}{% endif %}{% if spacing %} {{ spacing }}{% endif %}{% if mobileHidden %} hidden lg:flex{% endif %}">
    <div class="n7-top-bar__container n7-container mx-auto flex items-center lg:flex-1">
        {% block leftArea %}
        <div class="n7-top-bar__navigation grid lg:flex items-center gap-2 lg:gap-8">
             {% block TopBarLinkLeft %}
               {# {% if hasTopBarLinkLeft === 'true' %} #}
               {% if topBarLinkLeft.length > 0 %}
                <div class="flex gap-4 items-center">
                    {% for item in topBarLinkLeft %}
                        <a href="{% if item.link %}{{ item.link }}{% else %}#{% endif %}" class="n7-link">
                             <img src="{{ item.image }}" alt="{{ item.alt }}" width="{{ item.width }}" height="{{ item.height }}" {% if item.imageSrcset %}srcset="{{ item.imageSrcset }}"{% endif %}>
                        </a>
                    {% endfor %}
                </div>
                {% endif %}
             {% endblock TopBarLinkLeft %}
            {% block secondaryNav %}
            {% if hasSecondaryNav %}
                <!-- Secondary nav/menu component -->
                {% render '@secondary-navigation',{label: 'Secondaria', items: [{label : 'voce 1'}, { label : 'voce 2'}] }, true %}
            {% endif %}
            {% endblock secondaryNav %}
        </div>
        {% endblock leftArea %}

        {% block rightArea %}
        <div class="n7-top-bar__utilities-area flex ml-auto">
            {% block TopBarLinkRight %}
               {# {% if hasTopBarLinkRight === 'true' %} #}
               {% if topBarLinkRight.length > 0 %}
                <div class="n7-flex n7-gap-4 n7-items-center">
                    {% for item in topBarLinkRight %}
                        <a href="{% if item.link %}{{ item.link }}{% else %}#{% endif %}" class="n7-link">
                             <img src="{{ item.image }}" alt="{{ item.alt }}" width="{{ item.width }}" height="{{ item.height }}" {% if item.imageSrcset %}srcset="{{ item.imageSrcset }}"{% endif %}>
                        </a>
                    {% endfor %}
                </div>
                {% endif %}
            {% endblock TopBarLinkRight %}
            {% if hasTopBarSocial %}
                <!-- Social links component -->
                {% render '@social-links',{id: 'headerSocial',listGap: 'gap-4', classes: 'p-2 lg:p-0',linkIconSize: 'w-8 h-8 lg:w-6 lg:h-6', items: [{label : 'Vai al profilo Facebook di ???', icon: 'solid--facebook', classes : 'flex items-center'}, {label : 'Vai al profilo Instagram di ???', icon: 'solid--instagram', classes : 'flex items-center'}, {label : 'Vai al canale YouTube di ???', icon: 'solid--youtube', classes : 'flex items-center'}] }, true %}
                {% render '@vertical-divider',{ width: 'w-1e', classes: 'flex mx-6 hidden lg:block' },true%}
            {% endif %}
            {% if hasLanguageSelector %}
                <!-- Language Selctor component -->
                <div class="px-4">Lingua</div>
            {% endif %}
            {% if hasSearchButton %}
            <!-- Search component -->
            <div class="hidden lg:block">
                <button type="button" id="searchModalTrigger" class="n7-btn n7-btn--secondary n7-btn--icon rounded-full w-6 h-6 md:w-10 md:h-10">
                    <span class="sr-only">Cerca nel sito - apri la modale</span>
                    {% render '@icon--small', { id: 'mini--magnifying-glass', size: 'w-4 h-4 md:w-5 md:h-5' }, true %}
                </button>

                <!-- Search Modal -->
                <div
                id="searchModal"
                class="fixed items-center content-center inset-0 bg-black bg-opacity-50 overflow-y-auto h-full w-full"
                style="display:none;"
                aria-hidden="true"
                role="dialog"
                aria-modal="true"
                aria-labelledby="modalTitle">

                    <div class="relative h-full lg:h-full lg:w-full mx-auto p-6 lg:p-16 shadow-lg bg-white">
                        <div class="container n7-modal-content px-16 grid gap-14">
                            <div class="flex justify-between items-center">
                                <h2 id="modalTitle" class="text-3xl md:text-5xl lg:text-6xl">Cerca nel sito</h2>
                                <button
                                id="closeModal"
                                class="n7-btn n7-btn--icon border-0 hover:n7-background-primary hover:text-white">
                                <span class="sr-only">Chiudi</span>
                                {% render '@icon--small', {id: 'mini--x-mark', size: 'w-8 h-8'}, true %}
                                </button>
                            </div>
                          
                            <form role="search" class="flex gap-2">
                                {% render '@input-field--search', { 
                                    classes: 'flex-1',
                                    label: 'Cerca servizi, informazioni, aiuti...', 
                                    input: {
                                        id: 'inputSearch',
                                        type: 'search',
                                        placeholder: 'Cerca',
                                        iconPlaceholder: 'mini--magnifying-glass'
                                    }
                                }, true %}
                                {% render '@button--icon-right', {label: 'Cerca nel sito', classes: 'n7-btn--primary self-end', icon: 'mini--chevron-right'}, true %}
                            </form>
                            {# <p class="is-focusable-element">focusable element if no focusable elements are present</p> #}
                        </div><!-- /END MODAL CONTENT -->
                    </div>

                </div>
            </div><!--/ END SEARCH WRAPPER -->
            {% endif %}
        </div>
        <!--/ END TOP BAR UTILITIES -->
        {% endblock rightArea %}
    </div>
</div><!-- /END TOPBAR -->
 
{
  "classes": "flex items-center",
  "bgColor": "n7-background-02",
  "spacing": "py-1 md:py-2 px-4",
  "hasTopBarLinkLeft": false,
  "hasSecondaryNav": true,
  "hasTopBarSocial": true,
  "hasLanguageSelector": true,
  "hasSearchButton": true,
  "mobileHidden": true,
  "topBarLinkRight": [
    {
      "alt": "Brand link",
      "link": null,
      "width": 147,
      "height": 28,
      "image": "/images/logo.png",
      "imageSrcset": "/images/logo.png 1x, /images/logo@2x.png 2x"
    }
  ]
}

Top bar component

Configurations:

  • classes: value - top bar classes
  • bgColor: value - background color classes
  • spacing: values - spacing classes
  • hasTopBarLinkLeft: true - show or hide auxiliary top bar link in left area
  • hasTopBarLinkRight: true - show or hide auxiliary top bar link in right area
  • hasSecondaryNav: true - manage secondary navigation
  • hasTopBarSocial: true - manage social bar
  • hasLanguageSelector: true - manage language selector
  • hasSearchButton: true - manage top bar search and modal
  • topBarLinkLeft: array - manage top bar link in left area
    • alt: value - link alt attribute
    • link: value - link url
    • width: value - link width
    • height: value - link height
    • image: value - link image
    • imageSrcset: value - link image srcset
  • topBarLinkRight: array - manage top bar link in right area
    • alt: value - link alt attribute
    • link: value - link url
    • width: value - link width
    • height: value - link height
    • image: value - link image
    • imageSrcset: value - link image srcset Blocks:
  • leftArea
  • hasTopBarLinkLeft
  • rightArea
  • hasTopBarLinkRight
  • classes: for class overridings in variant templates, if needed