showcar-ui/src/06-components/organisms/navigation-v2/docs/navigation-v2-variation1.html

Showcar-ui is the pattern library that is used to build the frontend of AutoScout24. It provides CSS classes, custom elements and components.

<a class="skip-main" href="#main-target">Skip to main content</a>
<header class="sc-navigation-v2" role="navigation">
    <div class="bar">
        <button class="sc-btn-mobile-menu"><span></span>Menu</button>
        <a href="https://www.autoscout24.de" class="icon-auto24">
            <as24-icon type="auto24"></as24-icon>
        </a>
    </div>
    <nav aria-label="mainmenu">
        <ul class="left">
            <li>
                <a href="http://google.de/" target="_blank">Link Without Subnav</a>
            </li>

            <li>
                <button class="title sc-inline-link sc-btn-block" aria-haspopup="true" aria-expanded="false">Menu 1</button>
                <span class="subtitle">I am small text</span>
                <div class="submenu">
                    <a href="#navigation-v2">Menu 1 Link 1</a>
                    <a href="#navigation-v2">Menu 1 Link 2<em class="sc-disruptor-small"> New</em></a>
                    <a href="#navigation-v2">Menu 1 Link 3</a>
                </div>
            </li>

            <li>
                <button class="title sc-inline-link sc-btn-block" aria-haspopup="true" aria-expanded="false">Sub menu Right</button>
                <span class="subtitle">You place me below top level link. I will be truncated</span>
                <div class="submenu extended">
                    <div>
                        <span class="subheadspanne">Left header</span>
                        <a href="#navigation-v2">Submenu 1 Link 1</a>
                        <a href="#navigation-v2">Submenu 1 Link 2</a>
                        <a href="#navigation-v2">Submenu 1 Link 3</a>
                    </div>
                    <div>
                        <span class="subheadline">Right Header</span>
                        <a href="#navigation-v2">Submenu 1 Link 1</a>
                        <a href="#navigation-v2">Submenu 1 Link 2</a>
                        <a href="#navigation-v2">Submenu 1 Link 3</a>
                    </div>
                </div>
            </li>

            <li class="left-flyout">
                <button class="title sc-inline-link sc-btn-block" aria-haspopup="true" aria-expanded="false">Submenu Left</button>
                <div class="submenu extended">
                    <div>
                        <span class="subheadline">Submenu 1</span>
                        <a href="#navigation-v2">Submenu 1 Link 1</a>
                        <a href="#navigation-v2">Submenu 1 Link 2</a>
                        <a href="#navigation-v2">Submenu 1 Link 3</a>
                    </div>
                    <div>
                        <span class="subheadline">Submenu 2</span>
                        <a href="#navigation-v2">Submenu 2 Link 1</a>
                        <a href="#navigation-v2">Submenu 2 Link 2</a>
                        <a href="#navigation-v2">Submenu 2 Link 3</a>
                    </div>
                    <div>
                        <span class="subheadline">Submenu 3</span>
                        <a href="#navigation-v2">Submenu 3 Link 1</a>
                        <a href="#navigation-v2">Submenu 3 Link 2</a>
                        <a href="#navigation-v2">Submenu 3 Link 3</a>
                    </div>
                </div>
            </li>
        </ul>

        <ul class="right left-flyout">
            <li>
                <button class="title sc-inline-link sc-btn-block" aria-haspopup="true" aria-expanded="false">Right Menu</button>
                <div class="submenu">
                    <a href="#">Right menu Link 1</a>
                    <a href="#">Right menu Link 2</a>
                    <a href="#">Right menu Link 3</a>
                    <span class="separator"></span>
                    <a rel="nofollow" href="#">Another Link</a>
                </div>
            </li>

            <li class="country-selector">
                <button class="title sc-inline-link sc-btn-block aria-haspopup="true" aria-expanded="false""><as24-icon type="flag/de"></as24-icon></button>
                <div class="submenu">
                        <a href="#navigation-v2">
                            <as24-icon type="flag/de"></as24-icon><span>Deutschland</span>
                        </a>
                        <a href="#navigation-v2">
                            <as24-icon type="flag/be"></as24-icon><span>België/Belgique</span>
                        </a>
                    <span>—</span>
                    <a href="#navigation-v2">Български</a>
                    <a href="#navigation-v2">Česky</a>
                </div>
            </li>
        </ul>
    </nav>
</header>
<span id="#main-target"></span>