showcar-ui/src/06-components/organisms/navigation-v2/docs/navigation-v2-default.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" aria-expanded="false"><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">Suchen</a>
            </li>

            <li>
                <button class="title sc-inline-link sc-btn-block" aria-haspopup="true" aria-expanded="false">Verkaufen</button>
                <div class="submenu">
                    <span class="subheadline">I am small text</span>
                    <a href="#navigation-v2">Menu 1 Link 1</a>
                    <a href="#navigation-v2">Menu 1 Link<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">Informieren</button>
                <span class="subtitle">You place me below top level link. I will be truncated</span>
                <div class="submenu extended">
                    <div>
                        <span class="subheadline">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">Finanzieren</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 class="myaccount">
                <button class="title sc-inline-link sc-btn-block" aria-haspopup="true" aria-expanded="false">Mein Konto</button>
                <span class="subtitle">I am small text</span>
                <div class="submenu visible-on-mobile">
                    <a href="#navigation-v2">Right menu Link 1 (<span>0</span>)</a>
                    <a href="#navigation-v2">Right menu Link 2</a>
                    <a href="#navigation-v2">Right menu Link 3</a>
                    <button href="#navigation-v2" class="sc-btn-ross sc-btn-block button-with-subtitle">Button Link</button>
                    <span>Small Tagline?
                        <a href="#navigation-v2" class="sc-link">Click me</a>
                    </span>
                    <span class="separator"></span>
                    <a href="#navigation-v2">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>