NetApp logo
LUCI Version 4.0.0

Menus

Menus display a list of actions or links within a non-modal container.

Triggers

Menus can be triggered via a variation of elements and styles:

Primary Buttons
Secondary Buttons
Flat Buttons
Icon Buttons
Regular Link

Buttons

Standard

Copied to clipboard 
<div class="luci-menu">
    <button class="luci-button luci-button--primary luci-menu__trigger luci-button--with-icons" aria-expanded="false" aria-haspopup="true">
        <span class="luci-button__inner">
            <span class="luci-button__text"> Menu Primary </span>
            <svg class="luci-icon luci-button__icon luci-button__icon--right" aria-hidden="true">
                <use xlink:href="/icons/luci.svg#expand">
                </use>
            </svg>
        </span>
    </button>
    <div class="luci-menu__content luci-container--light" role="menu" aria-hidden="true">
        <div class="luci-menu__body luci-menu__body--no-padding">
            <ul class="luci-list-group">
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item wither longer text </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item wither longer text </a>
                </li>
            </ul>
        </div>
    </div>
</div>

Small

Copied to clipboard 
<div class="luci-menu">
    <button class="luci-button luci-button--primary luci-button--small luci-menu__trigger luci-button--with-icons" aria-expanded="false" aria-haspopup="true">
        <span class="luci-button__inner">
            <span class="luci-button__text"> Menu Primary Small </span>
            <svg class="luci-icon luci-button__icon luci-button__icon--right" aria-hidden="true">
                <use xlink:href="/icons/luci.svg#expand">
                </use>
            </svg>
        </span>
    </button>
    <div class="luci-menu__content luci-container--light" role="menu" aria-hidden="true">
        <div class="luci-menu__body luci-menu__body--no-padding">
            <ul class="luci-list-group">
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item wither longer text </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item wither longer text </a>
                </li>
            </ul>
        </div>
    </div>
</div>

Icon only

Large and Small icon only button variations.

Copied to clipboard 
<div class="luci-menu">
    <button class="luci-button luci-button--icon-only luci-button--flat luci-menu__trigger" aria-expanded="false" aria-haspopup="true">
        <span class="luci-button__inner">
            <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                <use xlink:href="/icons/luci.svg#add">
                </use>
            </svg>
        </span>
    </button>
    <div class="luci-menu__content luci-container--light" role="menu" aria-hidden="true">
        <div class="luci-menu__body luci-menu__body--no-padding">
            <ul class="luci-list-group">
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item wither longer text </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item wither longer text </a>
                </li>
            </ul>
        </div>
    </div>
</div>

Split

The split button is a common application of a menu. The split button menu provides both a primary target destination and another target that instantiates the menu.

Copied to clipboard 
<div class="luci-menu luci-menu--left">
    <div class="luci-button-group">
        <button class="luci-button luci-button--primary luci-button--small"> Menu Split Primary </button>
        <button class="luci-button luci-button--primary luci-button--small luci-menu__trigger luci-button--with-icons" aria-expanded="false" aria-haspopup="true">
            <span class="luci-button__inner">
                <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                    <use xlink:href="/icons/luci.svg#expand">
                    </use>
                </svg>
            </span>
        </button>
    </div>
    <div class="luci-menu__content luci-container--light" role="menu" aria-hidden="true">
        <div class="luci-menu__body luci-menu__body--no-padding">
            <ul class="luci-list-group">
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item wither longer text </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item wither longer text </a>
                </li>
            </ul>
        </div>
    </div>
</div>
Copied to clipboard 
<div class="luci-menu">
    <a class="luci-link undefined luci-menu__trigger" href="#" aria-expanded="false" aria-haspopup="true">
        <span class="luci-link__text"> Regular Link with expand icon </span>
        <svg class="luci-icon luci-link__icon luci-link__icon--right" aria-hidden="true">
            <use xlink:href="/icons/luci.svg#expand">
            </use>
        </svg>
    </a>
    <div class="luci-menu__content luci-container--light" role="menu" aria-hidden="true">
        <div class="luci-menu__body">
            <ul class="luci-list-group">
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item wither longer text </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item wither longer text </a>
                </li>
            </ul>
        </div>
    </div>
</div>

Interactive Behavior

  • LUCI menus are always positioned below the element that triggers it.
  • LUCI menus are always triggered on-click, never on hover.
  • LUCI menus can be dismissed in several ways:
    • Selecting an item in the list.
    • Pressing escape.
    • Clicking outside the menu.
  • LUCI menus are scrollable.

Colors

Light Gray background

The default background color of LUCI menu containers is $luci-background-color-light #F2F2F2.

Copied to clipboard 
<div class="luci-menu">
    <button class="luci-button luci-button--primary luci-menu__trigger luci-button--with-icons" aria-expanded="false" aria-haspopup="true">
        <span class="luci-button__inner">
            <span class="luci-button__text"> Menu Primary </span>
            <svg class="luci-icon luci-button__icon luci-button__icon--right" aria-hidden="true">
                <use xlink:href="/icons/luci.svg#expand">
                </use>
            </svg>
        </span>
    </button>
    <div class="luci-menu__content luci-container--light" role="menu" aria-hidden="true">
        <div class="luci-menu__body luci-menu__body--no-padding">
            <ul class="luci-list-group">
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item wither longer text </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item wither longer text </a>
                </li>
            </ul>
        </div>
    </div>
</div>

White background

A white background can also be used to provide greater contrast when the page the menu is triggered from has a non-white background.

Copied to clipboard 
<div class="luci-menu">
    <button class="luci-button luci-button--primary luci-menu__trigger luci-button--with-icons" aria-expanded="false" aria-haspopup="true">
        <span class="luci-button__inner">
            <span class="luci-button__text"> Menu Primary </span>
            <svg class="luci-icon luci-button__icon luci-button__icon--right" aria-hidden="true">
                <use xlink:href="/icons/luci.svg#expand">
                </use>
            </svg>
        </span>
    </button>
    <div class="luci-menu__content luci-container--white" role="menu" aria-hidden="true">
        <div class="luci-menu__body luci-menu__body--no-padding">
            <ul class="luci-list-group">
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item wither longer text </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item wither longer text </a>
                </li>
            </ul>
        </div>
    </div>
</div>

List Variation Examples

The lists within a menu conform to the style and behavior of the list group component.

Here are several common examples:

Basic List

Copied to clipboard 
<div class="luci-menu">
    <button class="luci-button luci-button--secondary luci-menu__trigger luci-button--with-icons" aria-expanded="false" aria-haspopup="true">
        <span class="luci-button__inner">
            <span class="luci-button__text"> Basic List </span>
            <svg class="luci-icon luci-button__icon luci-button__icon--right" aria-hidden="true">
                <use xlink:href="/icons/luci.svg#expand">
                </use>
            </svg>
        </span>
    </button>
    <div class="luci-menu__content luci-container--light" role="menu" aria-hidden="true">
        <div class="luci-menu__body luci-menu__body--no-padding">
            <ul class="luci-list-group">
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item wither longer text </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item wither longer text </a>
                </li>
            </ul>
        </div>
    </div>
</div>

Basic List with disabled menu items

Copied to clipboard 
<div class="luci-menu">
    <button class="luci-button luci-button--secondary luci-menu__trigger luci-button--with-icons" aria-expanded="false" aria-haspopup="true">
        <span class="luci-button__inner">
            <span class="luci-button__text"> Basic List with disabled items </span>
            <svg class="luci-icon luci-button__icon luci-button__icon--right" aria-hidden="true">
                <use xlink:href="/icons/luci.svg#expand">
                </use>
            </svg>
        </span>
    </button>
    <div class="luci-menu__content luci-container--light" role="menu" aria-hidden="true">
        <div class="luci-menu__body luci-menu__body--no-padding">
            <ul class="luci-list-group">
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <span class="luci-list-group__element luci-list-group__element--disabled"> Menu list item </span>
                </li>
                <li class="luci-list-group__item">
                    <span class="luci-list-group__element luci-list-group__element--disabled"> Menu list item wither longer text </span>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Menu list item wither longer text </a>
                </li>
            </ul>
        </div>
    </div>
</div>

Nested

Copied to clipboard 
<div class="luci-menu">
    <button class="luci-button luci-button--secondary luci-menu__trigger luci-button--with-icons" aria-expanded="false" aria-haspopup="true">
        <span class="luci-button__inner">
            <span class="luci-button__text"> Nested List </span>
            <svg class="luci-icon luci-button__icon luci-button__icon--right" aria-hidden="true">
                <use xlink:href="/icons/luci.svg#expand">
                </use>
            </svg>
        </span>
    </button>
    <div class="luci-menu__content luci-container--light" role="menu" aria-hidden="true">
        <div class="luci-menu__body luci-menu__body--no-padding">
            <ul class="luci-list-group">
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Dashboard </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Configuration </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Upgrade Advisor </a>
                    <ul class="luci-list-group">
                        <li class="luci-list-group__item">
                            <a href="#" class="luci-list-group__element luci-list-group__element--link"> Nested List item 1 </a>
                        </li>
                        <li class="luci-list-group__item">
                            <a href="#" class="luci-list-group__element luci-list-group__element--link"> Nested List item 2 </a>
                        </li>
                        <li class="luci-list-group__item">
                            <a href="#" class="luci-list-group__element luci-list-group__element--link"> List item 3 item 3 </a>
                        </li>
                    </ul>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> AutoSupport Alerts </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link"> Health </a>
                </li>
            </ul>
        </div>
    </div>
</div>

List with icon

Copied to clipboard 
<div class="luci-menu">
    <button class="luci-button luci-button--secondary luci-menu__trigger luci-button--with-icons" aria-expanded="false" aria-haspopup="true">
        <span class="luci-button__inner">
            <span class="luci-button__text"> List With Icon </span>
            <svg class="luci-icon luci-button__icon luci-button__icon--right" aria-hidden="true">
                <use xlink:href="/icons/luci.svg#expand">
                </use>
            </svg>
        </span>
    </button>
    <div class="luci-menu__content luci-container--light" role="menu" aria-hidden="true">
        <div class="luci-menu__body luci-menu__body--no-padding">
            <ul class="luci-list-group">
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--flex">
                        <span class="luci-list-group__cell">
                            <svg class="luci-icon" aria-hidden="true">
                                <use xlink:href="/icons/luci.svg#reports">
                                </use>
                            </svg>
                        </span>
                        <span class="luci-list-group__cell luci-list-group__cell--text"> Dashboard </span>
                    </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--flex">
                        <span class="luci-list-group__cell">
                            <svg class="luci-icon" aria-hidden="true">
                                <use xlink:href="/icons/luci.svg#configure">
                                </use>
                            </svg>
                        </span>
                        <span class="luci-list-group__cell luci-list-group__cell--text"> Configuration </span>
                    </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--flex">
                        <span class="luci-list-group__cell">
                            <svg class="luci-icon" aria-hidden="true">
                                <use xlink:href="/icons/luci.svg#performance">
                                </use>
                            </svg>
                        </span>
                        <span class="luci-list-group__cell luci-list-group__cell--text"> Upgrade Advisor </span>
                    </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--flex">
                        <span class="luci-list-group__cell">
                            <svg class="luci-icon" aria-hidden="true">
                                <use xlink:href="/icons/luci.svg#warning">
                                </use>
                            </svg>
                        </span>
                        <span class="luci-list-group__cell luci-list-group__cell--text"> AutoSupport Alerts </span>
                    </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--flex">
                        <span class="luci-list-group__cell">
                            <svg class="luci-icon" aria-hidden="true">
                                <use xlink:href="/icons/luci.svg#health">
                                </use>
                            </svg>
                        </span>
                        <span class="luci-list-group__cell luci-list-group__cell--text"> Health </span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

List with icon and count

Copied to clipboard 
<div class="luci-menu">
    <button class="luci-button luci-button--secondary luci-menu__trigger luci-button--with-icons" aria-expanded="false" aria-haspopup="true">
        <span class="luci-button__inner">
            <span class="luci-button__text"> List With Icon &amp; Count </span>
            <svg class="luci-icon luci-button__icon luci-button__icon--right" aria-hidden="true">
                <use xlink:href="/icons/luci.svg#expand">
                </use>
            </svg>
        </span>
    </button>
    <div class="luci-menu__content luci-container--light" role="menu" aria-hidden="true">
        <div class="luci-menu__body luci-menu__body--no-padding">
            <ul class="luci-list-group">
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--flex">
                        <span class="luci-list-group__cell">
                            <svg class="luci-icon" aria-hidden="true">
                                <use xlink:href="/icons/luci.svg#reports">
                                </use>
                            </svg>
                        </span>
                        <span class="luci-list-group__cell luci-list-group__cell--text"> Dashboard </span>
                    </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--flex">
                        <span class="luci-list-group__cell">
                            <svg class="luci-icon" aria-hidden="true">
                                <use xlink:href="/icons/luci.svg#configure">
                                </use>
                            </svg>
                        </span>
                        <span class="luci-list-group__cell luci-list-group__cell--text"> Configuration </span>
                    </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--flex">
                        <span class="luci-list-group__cell">
                            <svg class="luci-icon" aria-hidden="true">
                                <use xlink:href="/icons/luci.svg#performance">
                                </use>
                            </svg>
                        </span>
                        <span class="luci-list-group__cell luci-list-group__cell--text"> Upgrade Advisor </span>
                    </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--flex">
                        <span class="luci-list-group__cell">
                            <svg class="luci-icon" aria-hidden="true">
                                <use xlink:href="/icons/luci.svg#warning">
                                </use>
                            </svg>
                        </span>
                        <span class="luci-list-group__cell luci-list-group__cell--text"> AutoSupport Alerts </span>
                    </a>
                </li>
                <li class="luci-list-group__item">
                    <a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--flex">
                        <span class="luci-list-group__cell">
                            <svg class="luci-icon" aria-hidden="true">
                                <use xlink:href="/icons/luci.svg#health">
                                </use>
                            </svg>
                        </span>
                        <span class="luci-list-group__cell luci-list-group__cell--text"> Health </span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

List with checkboxes

Copied to clipboard 
<div class="luci-menu">
    <button class="luci-button luci-button--secondary luci-menu__trigger luci-button--with-icons" aria-expanded="false" aria-haspopup="true">
        <span class="luci-button__inner">
            <span class="luci-button__text"> List With Checkboxes </span>
            <svg class="luci-icon luci-button__icon luci-button__icon--right" aria-hidden="true">
                <use xlink:href="/icons/luci.svg#expand">
                </use>
            </svg>
        </span>
    </button>
    <div class="luci-menu__content luci-container--light" role="menu" aria-hidden="true">
        <div class="luci-menu__body luci-menu__body--no-padding">
            <ul class="luci-list-group">
                <li class="luci-list-group__item luci-list-group__item--heading"> Show/Hide Columns </li>
                <li class="luci-list-group__item">
                    <form class="luci-form" action="#" method="post">
                        <div class="luci-form__field-group">
                            <span class="luci-form__checkbox">
                                <label for="checkbox45200" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox45200" value="on" checked>
                                    <span class="luci-checkbox__button"></span>
                                    <span class="luci-checkbox__label-text">Serial Number</span>
                                </label>
                            </span>
                            <span class="luci-form__checkbox">
                                <label for="checkbox69035" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox69035" value="on">
                                    <span class="luci-checkbox__button"></span>
                                    <span class="luci-checkbox__label-text">Cluster Serial Number</span>
                                </label>
                            </span>
                            <span class="luci-form__checkbox">
                                <label for="checkbox55644" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox55644" value="on">
                                    <span class="luci-checkbox__button"></span>
                                    <span class="luci-checkbox__label-text">Cluster Name</span>
                                </label>
                            </span>
                            <span class="luci-form__checkbox">
                                <label for="checkbox92424" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox92424" value="on">
                                    <span class="luci-checkbox__button"></span>
                                    <span class="luci-checkbox__label-text">Remote Cluster Serial Number with long text</span>
                                </label>
                            </span>
                            <span class="luci-form__checkbox">
                                <label for="checkbox80392" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox80392" value="on" checked>
                                    <span class="luci-checkbox__button"></span>
                                    <span class="luci-checkbox__label-text">Product Family</span>
                                </label>
                            </span>
                            <span class="luci-form__checkbox">
                                <label for="checkbox16837" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox16837" value="on">
                                    <span class="luci-checkbox__button"></span>
                                    <span class="luci-checkbox__label-text">Product Location</span>
                                </label>
                            </span>
                            <span class="luci-form__checkbox">
                                <label for="checkbox85574" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox85574" value="on">
                                    <span class="luci-checkbox__button"></span>
                                    <span class="luci-checkbox__label-text">Group</span>
                                </label>
                            </span>
                            <span class="luci-form__checkbox">
                                <label for="checkbox17582" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox17582" value="on">
                                    <span class="luci-checkbox__button"></span>
                                    <span class="luci-checkbox__label-text">Product Number</span>
                                </label>
                            </span>
                            <span class="luci-form__checkbox">
                                <label for="checkbox88569" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox88569" value="on" checked>
                                    <span class="luci-checkbox__button"></span>
                                    <span class="luci-checkbox__label-text">Contract Status</span>
                                </label>
                            </span>
                            <span class="luci-form__checkbox">
                                <label for="checkbox2246" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox2246" value="on" checked>
                                    <span class="luci-checkbox__button"></span>
                                    <span class="luci-checkbox__label-text">OS Version</span>
                                </label>
                            </span>
                            <span class="luci-form__checkbox">
                                <label for="checkbox39050" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox39050" value="on" checked>
                                    <span class="luci-checkbox__button"></span>
                                    <span class="luci-checkbox__label-text">System name</span>
                                </label>
                            </span>
                        </div>
                    </form>
                </li>
            </ul>
        </div>
        <div class="luci-menu__action">
            <button class="luci-button luci-button--primary luci-button--small"> Submit </button>
        </div>
    </div>
</div>

List with contextual actions

Copied to clipboard 
<div class="luci-menu">
    <button class="luci-button luci-button--secondary luci-menu__trigger luci-button--with-icons" aria-expanded="false" aria-haspopup="true">
        <span class="luci-button__inner">
            <span class="luci-button__text"> List With Contextual Actions </span>
            <svg class="luci-icon luci-button__icon luci-button__icon--right" aria-hidden="true">
                <use xlink:href="/icons/luci.svg#expand">
                </use>
            </svg>
        </span>
    </button>
    <div class="luci-menu__content luci-container--light" role="menu" aria-hidden="true">
        <div class="luci-menu__body">
            <ul class="luci-list-group luci-list-group--contextual">
                <li class="luci-list-group__item luci-list-group__item--heading"> Sample Title Here </li>
                <li class="luci-list-group__item">
                    <span class="luci-list-group__contextual-row">
                        <span class="luci-list-group__contextual-cell luci-list-group__contextual-cell--text">
                            <a href="#" class="luci-list-group__element luci-list-group__element--link"> Critical </a>
                        </span>
                        <span class="luci-list-group__contextual-cell">
                            <button class="luci-list-group__element luci-list-group__element--link">
                                <svg class="luci-icon luci-icon" aria-hidden="true">
                                    <use xlink:href="/icons/luci.svg#edit">
                                    </use>
                                </svg>
                            </button>
                        </span>
                        <span class="luci-list-group__contextual-cell">
                            <button class="luci-list-group__element luci-list-group__element--link">
                                <svg class="luci-icon luci-icon" aria-hidden="true">
                                    <use xlink:href="/icons/luci.svg#delete">
                                    </use>
                                </svg>
                            </button>
                        </span>
                    </span>
                </li>
                <li class="luci-list-group__item">
                    <span class="luci-list-group__contextual-row">
                        <span class="luci-list-group__contextual-cell luci-list-group__contextual-cell--text">
                            <a href="#" class="luci-list-group__element luci-list-group__element--link"> daveg </a>
                        </span>
                        <span class="luci-list-group__contextual-cell">
                            <button class="luci-list-group__element luci-list-group__element--link">
                                <svg class="luci-icon luci-icon" aria-hidden="true">
                                    <use xlink:href="/icons/luci.svg#edit">
                                    </use>
                                </svg>
                            </button>
                        </span>
                        <span class="luci-list-group__contextual-cell">
                            <button class="luci-list-group__element luci-list-group__element--link">
                                <svg class="luci-icon luci-icon" aria-hidden="true">
                                    <use xlink:href="/icons/luci.svg#delete">
                                    </use>
                                </svg>
                            </button>
                        </span>
                    </span>
                </li>
                <li class="luci-list-group__item">
                    <span class="luci-list-group__contextual-row">
                        <span class="luci-list-group__contextual-cell luci-list-group__contextual-cell--text">
                            <a href="#" class="luci-list-group__element luci-list-group__element--link"> dgntapcustasdfa-witdgntapcustasdfa-wit </a>
                        </span>
                        <span class="luci-list-group__contextual-cell">
                            <button class="luci-list-group__element luci-list-group__element--link">
                                <svg class="luci-icon luci-icon" aria-hidden="true">
                                    <use xlink:href="/icons/luci.svg#edit">
                                    </use>
                                </svg>
                            </button>
                        </span>
                        <span class="luci-list-group__contextual-cell">
                            <button class="luci-list-group__element luci-list-group__element--link">
                                <svg class="luci-icon luci-icon" aria-hidden="true">
                                    <use xlink:href="/icons/luci.svg#delete">
                                    </use>
                                </svg>
                            </button>
                        </span>
                    </span>
                </li>
                <li class="luci-list-group__item">
                    <span class="luci-list-group__contextual-row">
                        <span class="luci-list-group__contextual-cell luci-list-group__contextual-cell--text">
                            <a href="#" class="luci-list-group__element luci-list-group__element--link"> kcdemo </a>
                        </span>
                        <span class="luci-list-group__contextual-cell">
                            <button class="luci-list-group__element luci-list-group__element--link">
                                <svg class="luci-icon luci-icon" aria-hidden="true">
                                    <use xlink:href="/icons/luci.svg#edit">
                                    </use>
                                </svg>
                            </button>
                        </span>
                        <span class="luci-list-group__contextual-cell">
                            <button class="luci-list-group__element luci-list-group__element--link">
                                <svg class="luci-icon luci-icon" aria-hidden="true">
                                    <use xlink:href="/icons/luci.svg#delete">
                                    </use>
                                </svg>
                            </button>
                        </span>
                    </span>
                </li>
                <li class="luci-list-group__item">
                    <span class="luci-list-group__contextual-row">
                        <span class="luci-list-group__contextual-cell luci-list-group__contextual-cell--text">
                            <a href="#" class="luci-list-group__element luci-list-group__element--link"> New test group </a>
                        </span>
                        <span class="luci-list-group__contextual-cell">
                            <button class="luci-list-group__element luci-list-group__element--link">
                                <svg class="luci-icon luci-icon" aria-hidden="true">
                                    <use xlink:href="/icons/luci.svg#edit">
                                    </use>
                                </svg>
                            </button>
                        </span>
                        <span class="luci-list-group__contextual-cell">
                            <button class="luci-list-group__element luci-list-group__element--link">
                                <svg class="luci-icon luci-icon" aria-hidden="true">
                                    <use xlink:href="/icons/luci.svg#delete">
                                    </use>
                                </svg>
                            </button>
                        </span>
                    </span>
                </li>
            </ul>
        </div>
    </div>
</div>

Refer to the list group for all available variations of list items.

Accessibility

  • Ensure menus can be opened and navigated using the keyboard.
    • Pressing enter or the spacebar when focus is on a menu trigger should open the menu and then pressing tab should change focus to the first element in the menu.
    • Pressing the escape key or clicking outside the menu should dismiss the menu.
  • Add an aria-haspopup="true" attribute on the trigger element.
  • Add an aria-expanded to the trigger element that toggles between ="true" and ="false" to correspond with the menu state.
  • Add a role="menu" attribute to the luci-menu__content element.
  • Add an aria-hidden attribute to the luci-menu__content element that toggles between ="true" and ="false" to correspond with the menu state.

Class Reference

Class Applies to Outcome

.luci-menu--is-open

.luci-menu

Displays the menu and adds active style to trigger element.

.luci-menu--left

.luci-menu

Display the menu to the left of the trigger.

.luci-menu__body--no-padding

.luci-menu__body

Removes padding from menu content to allow list links to go full width.

.luci-container--white

.luci-menu__content

Adds white background to menu content.