Component: .header--navigation--item

.header--navigation--item

One of the item of menu navigation.
Source:

Example

<li class="header--navigation--item">
    <!-- content -->
</li>

Part of

Members

.as-alternative :variation

Only if `.as-mobile-button` is setted. The submenu is displayed as a button in an alternative color.
Type:
  • variation
Source:
Example
<!-- This is not a button -->
<li class="header--navigation--item as-mobile-button">
    <!-- content -->
</li>
<!-- This is displayed -->
<li class="header--navigation--item as-mobile-button as-alternative">
    <!-- content -->
</li>

.as-mobile-button :variation

In this variation, the submenu is displayed as a button.
Type:
  • variation
Source:
Example
<!-- This is not a button -->
<li class="header--navigation--item">
    <!-- content -->
</li>
<!-- This is displayed -->
<li class="header--navigation--item as-mobile-button">
    <!-- content -->
</li>

.is-active :state

In this state, the submenu item is in active.
Type:
  • state
Source:
Example
<!-- This is not active -->
<li class="header--navigation--item">
    <!-- content -->
</li>
<!-- This is active -->
<li class="header--navigation--item is-active">
    <!-- content -->
</li>

.is-displayed :state

In this state, the submenu item is displayed.
Type:
  • state
Source:
Example
<!-- This is not displayed -->
<li class="header--navigation--item">
    <!-- content -->
</li>
<!-- This is displayed -->
<li class="header--navigation--item is-displayed">
    <!-- content -->
</li>