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-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#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>

Links

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 #F6F6F6.

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>

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>
                        <span class="luci-list-group__cell">
                            <span class="luci-pill"> 99+ </span>
                        </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="checkbox15224" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox15224" 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="checkbox54574" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox54574" 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="checkbox7514" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox7514" 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="checkbox28861" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox28861" 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="checkbox63792" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox63792" 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="checkbox83457" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox83457" 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="checkbox82428" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox82428" 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="checkbox53464" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox53464" 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="checkbox66655" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox66655" 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="checkbox96686" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox96686" 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="checkbox96288" class="luci-checkbox__label">
                                    <input type="checkbox" name="options" id="checkbox96288" 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 when 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.

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.