PatternLab (1.3.1)

LabXpert Navigation ​

The horizontal main navigation of the LabXpert header. Entries either link directly or open a dropdown — both variants share the same link styles and the same hover indicator.

Dropdown entries are built with a Panel plus a List inside, the same way the Dropdown component does.

Structure ​

ul.c-nav-labxpert
└── li.c-nav-labxpert__item          [.-is-current | .-is-active]
    ├── a.c-nav-labxpert__link.c-link                 ← direct link
    └── div.c-nav-labxpert__dropdown                  ← or: dropdown entry
        ├── button.c-nav-labxpert__link.c-link
        └── div.c-panel.-is-dropdown

TIP

Keep the .c-link class on the link — it provides the button reset and the keyboard focus outline. This component only overrides the color and adds the underline indicator.

State Classes ​

Set on .c-nav-labxpert__item. In TYPO3 these come from the v:page.menu attributes classCurrent / classActive.

StateClassEffect
Current page.-is-currentunderline stays visible
Page in the active path.-is-activeunderline stays visible
Ancestor of active page.-is-active-pathunderline stays visible

Example ​

Show Code
html
<ul class="c-nav-labxpert">
    <li class="c-nav-labxpert__item">
        <a class="c-nav-labxpert__link c-link" href="#">Start</a>
    </li>

    <li class="c-nav-labxpert__item -is-current">
        <a class="c-nav-labxpert__link c-link" href="#">Protokolle</a>
    </li>

    <li class="c-nav-labxpert__item">
        <div class="c-nav-labxpert__dropdown">
            <button type="button" class="c-nav-labxpert__link c-link" data-target="#nav-labxpert-sub-1" aria-haspopup="true">
                Verwaltung
                <i class="fa-solid fa-chevron-down h-small" aria-hidden="true"></i>
            </button>
            <div class="c-panel -close-backdrop -is-dropdown -is-extra-small" id="nav-labxpert-sub-1" role="menu" aria-haspopup="true">
                <div class="c-panel__inner p-x-0">
                    <ul class="c-list -linklist" role="menu">
                        <li class="c-list__item" role="none">
                            <a class="c-link h-color-black" href="#" role="menuitem">Stammdaten</a>
                        </li>
                        <li class="c-list__item" role="none">
                            <a class="c-link h-color-black" href="#" role="menuitem">Geräte</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </li>

    <li class="c-nav-labxpert__item">
        <a class="c-nav-labxpert__link c-link" href="#">Wissen</a>
    </li>
</ul>

Notes ​

  • The item spacing comes from the component (__item), not from an m-r-m utility in the markup.
  • The underline indicator fades in and slides up into place. Height, offset, travel distance and color are set in _variables.scss.
  • The indicator color is a fixed $dark-gray rather than @include primaryColor(): this component is compiled into pharma4u.css, where the primary color is the pharma4u one and not LabXpert's.
  • The underline reacts to :focus-visible, not :focus — so it does not appear on mouse clicks. The visible focus outline itself comes from .c-link.

2026 - Pharma4u