Skip to main content Skip to navigation

Dropdown Menus

Display a menu of actions in a non-modal panel adjacent to a triggering element.

Default

Trigger a dropdown menu using a click or focus event. By default, the menu is positioned below and left-aligned with the target element.

<button class="comet-button comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-with-text" data-comet-popover='dropdown-menu-example-1' haspopup='true'>
    <span class="comet-button__inner">
        <span class="comet-button__text">
            Click Me
        </span>
        <svg class="comet-button__icon comet-button__icon--right" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#triangle-down"></use>
        </svg>
    </span>
</button>
<div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="dropdown-menu-example-1" data-comet-popover-align="left">
    <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
        <ul class="comet-list-group__list">
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Action One
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Action Two
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Action Three
                    </span>
                </a>
            </li>
        </ul>
    </div>
</div>
                
{{ comet.button_icon(
            text="Click Me",
            class="comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger",
            icon_name="triangle-down",
            position="right",
            attrs="data-comet-popover='dropdown-menu-example-1' haspopup='true'")}}
{{ comet.dropdown_menu(
            id="dropdown-menu-example-1",
            menu_items=[
                {
                    label: "Action One",
                    href: "#"
                },
                {
                    label: "Action Two",
                    href: "#"
                },
                {
                    label: "Action Three",
                    href: "#"
                }
            ]) }}
                
Macro params reference

Positioned

Position a dropdown using one of four modifier classes:

  • comet-popover--bottom-left-aligned
  • comet-popover--bottom-right-aligned
  • comet-popover--top-left-aligned
  • comet-popover--top-right-aligned
<button class="comet-button comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-with-text" data-comet-popover='positioning-example-1' haspopup='true'>
    <span class="comet-button__inner">
        <span class="comet-button__text">
            Left
        </span>
        <svg class="comet-button__icon comet-button__icon--right" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#triangle-down"></use>
        </svg>
    </span>
</button>
<div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="positioning-example-1" data-comet-popover-align="left">
    <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
        <ul class="comet-list-group__list">
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Position Action One
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Position Action Two
                    </span>
                </a>
            </li>
        </ul>
    </div>
</div>
<button class="comet-button comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-with-text" data-comet-popover='positioning-example-2' haspopup='true'>
    <span class="comet-button__inner">
        <span class="comet-button__text">
            Right
        </span>
        <svg class="comet-button__icon comet-button__icon--right" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#triangle-down"></use>
        </svg>
    </span>
</button>
<div class="comet-dropdown-menu comet-popover comet-popover--bottom-right-aligned" id="positioning-example-2" data-comet-popover-align="right">
    <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
        <ul class="comet-list-group__list">
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Position Action One
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Position Action Two
                    </span>
                </a>
            </li>
        </ul>
    </div>
</div>
<button class="comet-button comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-with-text" data-comet-popover='positioning-example-3' haspopup='true'>
    <span class="comet-button__inner">
        <span class="comet-button__text">
            Top Left
        </span>
        <svg class="comet-button__icon comet-button__icon--right" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#triangle-up"></use>
        </svg>
    </span>
</button>
<div class="comet-dropdown-menu comet-popover comet-popover--top-left-aligned" id="positioning-example-3" data-comet-popover-align="left">
    <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
        <ul class="comet-list-group__list">
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Position Action One
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Position Action Two
                    </span>
                </a>
            </li>
        </ul>
    </div>
</div>
<button class="comet-button comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-with-text" data-comet-popover='positioning-example-4' haspopup='true'>
    <span class="comet-button__inner">
        <span class="comet-button__text">
            Top right
        </span>
        <svg class="comet-button__icon comet-button__icon--right" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#triangle-up"></use>
        </svg>
    </span>
</button>
<div class="comet-dropdown-menu comet-popover comet-popover--top-right-aligned" id="positioning-example-4" data-comet-popover-align="right">
    <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
        <ul class="comet-list-group__list">
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Position Action One
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Position Action Two
                    </span>
                </a>
            </li>
        </ul>
    </div>
</div>
                
{% set menu_items_for_all = [{ label: "Position Action One", href: "#" }, { label: "Position Action Two", href: "#" }] %}

{{ comet.button_icon(
            text="Left",
            class="comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger",
            icon_name="triangle-down",
            position="right",
            attrs="data-comet-popover='positioning-example-1' haspopup='true'")}}
{{ comet.dropdown_menu(
            id="positioning-example-1",
            menu_items=menu_items_for_all,
            menu_alignment="left",
            menu_placement="bottom") }}

{{ comet.button_icon(
            text="Right",
            class="comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger",
            icon_name="triangle-down",
            position="right",
            attrs="data-comet-popover='positioning-example-2' haspopup='true'")}}
{{ comet.dropdown_menu(
            id="positioning-example-2",
            menu_items=menu_items_for_all,
            menu_alignment="right",
            menu_placement="bottom") }}

{{ comet.button_icon(
            text="Top Left",
            class="comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger",
            icon_name="triangle-up",
            position="right",
            attrs="data-comet-popover='positioning-example-3' haspopup='true'")}}
{{ comet.dropdown_menu(
            id="positioning-example-3",
            menu_items=menu_items_for_all,
            menu_alignment="left",
            menu_placement="top") }}

{{ comet.button_icon(
            text="Top right",
            class="comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger",
            icon_name="triangle-up",
            position="right",
            attrs="data-comet-popover='positioning-example-4' haspopup='true'")}}
{{ comet.dropdown_menu(
            id="positioning-example-4",
            menu_items=menu_items_for_all,
            menu_alignment="right",
            menu_placement="top") }}
                
Macro params reference

Trigger Elements

Use any element to trigger a dropdown.

<button class="comet-button comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-with-text" data-comet-popover='trigger-example-1' haspopup='true'>
    <span class="comet-button__inner">
        <span class="comet-button__text">
            Click Me
        </span>
        <svg class="comet-button__icon comet-button__icon--right" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#triangle-down"></use>
        </svg>
    </span>
</button>
<div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="trigger-example-1" data-comet-popover-align="left">
    <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
        <ul class="comet-list-group__list">
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Menu Item 1
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Menu Item 2
                    </span>
                </a>
            </li>
        </ul>
    </div>
</div>
<button class="comet-button comet-button--ghost comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-with-text" data-comet-popover='trigger-example-2' haspopup='true'>
    <span class="comet-button__inner">
        <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#triangle-down"></use>
        </svg>
        <span class="comet-button__text">
            Click Me
        </span>
    </span>
</button>
<div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="trigger-example-2" data-comet-popover-align="left">
    <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
        <ul class="comet-list-group__list">
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Menu Item 1
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Menu Item 2
                    </span>
                </a>
            </li>
        </ul>
    </div>
</div>
<button class="comet-button comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-only" data-comet-popover='trigger-example-3' haspopup='true'>
    <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
        <use xlink:href="/comet/comet_assets/comet.svg#star"></use>
    </svg>
    <span class="comet-screenreader-only"></span>
</button>
<div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="trigger-example-3" data-comet-popover-align="left">
    <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
        <ul class="comet-list-group__list">
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Menu Item 1
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Menu Item 2
                    </span>
                </a>
            </li>
        </ul>
    </div>
</div>
<a href="#" class="comet-dropdown-trigger js-comet-dropdown-trigger" data-comet-popover="trigger-example-4">Click Me</a>
<div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="trigger-example-4" data-comet-popover-align="left">
    <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
        <ul class="comet-list-group__list">
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Menu Item 1
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Menu Item 2
                    </span>
                </a>
            </li>
        </ul>
    </div>
</div>
                
{{ comet.button_icon(
            text="Click Me",
            class="comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger",
            icon_name="triangle-down",
            position="right",
            attrs="data-comet-popover='trigger-example-1' haspopup='true'")}}
{{ comet.dropdown_menu(
            id="trigger-example-1") }}

{{ comet.button_icon(
            text="Click Me",
            class="comet-button--ghost comet-dropdown-trigger js-comet-dropdown-trigger",
            icon_name="triangle-down",
            attrs="data-comet-popover='trigger-example-2' haspopup='true'")}}
{{ comet.dropdown_menu(
            id="trigger-example-2") }}

{{ comet.button_icon(
            class="comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger",
            icon_name="star",
            attrs="data-comet-popover='trigger-example-3' haspopup='true'")}}
{{ comet.dropdown_menu(
            id="trigger-example-3") }}

<a href="#" class="comet-dropdown-trigger js-comet-dropdown-trigger" data-comet-popover="trigger-example-4">Click Me</a>
{{ comet.dropdown_menu(
            id="trigger-example-4") }}
                
Macro params reference

Style Modifiers

Horizontal Separator

Use a comet-dropdown-menu__item--separator-after modifier class on the last item in a group to separate it from a subsequent group.

<button class="comet-button comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-with-text" data-comet-popover='separator-example' haspopup='true'>
    <span class="comet-button__inner">
        <span class="comet-button__text">
            Horizontal Separator
        </span>
        <svg class="comet-button__icon comet-button__icon--right" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#triangle-down"></use>
        </svg>
    </span>
</button>
<div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="separator-example" data-comet-popover-align="left">
    <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
        <ul class="comet-list-group__list">
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Grouped Action One
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row comet-dropdown-menu__item--separator-after">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Grouped Action Two
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Separate Action
                    </span>
                </a>
            </li>
        </ul>
    </div>
</div>
                
{{ comet.button_icon(
        text="Horizontal Separator",
        class="comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger",
        icon_name="triangle-down",
        position="right",
        attrs="data-comet-popover='separator-example' haspopup='true'")}}
{{ comet.dropdown_menu(id="separator-example", menu_items=[
        {
            label: "Grouped Action One",
            href: "#"
        },
        {
            label: "Grouped Action Two",
            href: "#",
            class: "comet-dropdown-menu__item--separator-after"
        },
        {
            label: "Separate Action",
            href: "#"
        }
    ]) }}
                
Macro params reference

List Group Options

Alter dropdown menu styles by modifying the internal List Group component. Those options include but are not limited to:

Icon + Label Pairs

<button class="comet-button comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-with-text" data-comet-popover='icons-with-labels' haspopup='true'>
    <span class="comet-button__inner">
        <span class="comet-button__text">
            Icons With Labels
        </span>
        <svg class="comet-button__icon comet-button__icon--right" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#triangle-down"></use>
        </svg>
    </span>
</button>
<div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="icons-with-labels" data-comet-popover-align="left">
    <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
        <ul class="comet-list-group__list">
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <svg class="comet-list-group__row-type-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#asset-audio-cd"></use>
                    </svg>
                    <span class="comet-list-group__row-label">
                        Have a Listen
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row comet-dropdown-menu__item--separator-after">
                <a class="comet-list-group__row-anchor" href="#">
                    <svg class="comet-list-group__row-type-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#asset-book"></use>
                    </svg>
                    <span class="comet-list-group__row-label">
                        Read a book
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <svg class="comet-list-group__row-type-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#asset-clip-art"></use>
                    </svg>
                    <span class="comet-list-group__row-label">
                        Grow a plant
                    </span>
                </a>
            </li>
        </ul>
    </div>
</div>
                
{{ comet.button_icon(
    text="Icons With Labels",
    class="comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger",
    icon_name="triangle-down",
    position="right",
    attrs="data-comet-popover='icons-with-labels' haspopup='true'")}}
{{ comet.dropdown_menu(id="icons-with-labels", menu_items=[
        {
            type_icon: "asset-audio-cd",
            label: "Have a Listen",
            href: "#"
        },
        {
            type_icon: "asset-book",
            label: "Read a book",
            href: "#",
            class: "comet-dropdown-menu__item--separator-after"
        },
        {
            type_icon: "asset-clip-art",
            label: "Grow a plant",
            href: "#"
        }
    ]) }}
                
Macro params reference

Dark Menu

Use the dark menu option only when additional contrast is needed that the default white menu does not offer.

<button class="comet-button comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-with-text" data-comet-popover='comet-dropdown-menu-dark' haspopup='true'>
    <span class="comet-button__inner">
        <span class="comet-button__text">
            Dark Menu
        </span>
        <svg class="comet-button__icon comet-button__icon--right" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#triangle-down"></use>
        </svg>
    </span>
</button>
<div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="comet-dropdown-menu-dark" data-comet-popover-align="left">
    <div class="comet-list-group comet-theme--dark-background comet-dropdown-menu__list-group comet-list-group--no-hairlines">
        <ul class="comet-list-group__list">
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Grouped Action One
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row comet-dropdown-menu__item--separator-after">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Grouped Action Two
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Separate Action
                    </span>
                </a>
            </li>
        </ul>
    </div>
</div>
                
{{ comet.button_icon(
    text="Dark Menu",
    class="comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger",
    icon_name="triangle-down",
    position="right",
    attrs="data-comet-popover='comet-dropdown-menu-dark' haspopup='true'")}}
{{ comet.dropdown_menu(id="comet-dropdown-menu-dark", list_group_class="comet-theme--dark-background", menu_items=[
        {
            label: "Grouped Action One",
            href: "#"
        },
        {
            label: "Grouped Action Two",
            href: "#",
            class: "comet-dropdown-menu__item--separator-after"
        },
        {
            label: "Separate Action",
            href: "#"
        }
    ]) }}
                
Macro params reference

Subheaders

Use a List Group subheader when labeling groups of options. Never use larger header variations within a dropdown menu.

<button class="comet-button comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-with-text" data-comet-popover='subheading-example' haspopup='true'>
    <span class="comet-button__inner">
        <span class="comet-button__text">
            Horizontal Separator
        </span>
        <svg class="comet-button__icon comet-button__icon--right" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#triangle-down"></use>
        </svg>
    </span>
</button>
<div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="subheading-example" data-comet-popover-align="left">
    <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
        <ul class="comet-list-group__list">
            <li class="comet-list-group__subhead-row">
                Account
            </li>
            <li class="comet-list-group__row comet-dropdown-menu__item--separator-after">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Edit Profile
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Sign Out
                    </span>
                </a>
            </li>
        </ul>
    </div>
</div>
                
{{ comet.button_icon(
        text="Horizontal Separator",
        class="comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger",
        icon_name="triangle-down",
        position="right",
        attrs="data-comet-popover='subheading-example' haspopup='true'")}}
{{ comet.dropdown_menu(id="subheading-example", menu_items=[
        {
            label: "Account",
            subheader: true
        },
        {
            label: "Edit Profile",
            href: "#",
            class: "comet-dropdown-menu__item--separator-after"
        },
        {
            label: "Sign Out",
            href: "#"
        }
    ]) }}
                
Macro params reference

Selected List Option

<button class="comet-button comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-with-text" data-comet-popover='selected-option-menu' haspopup='true'>
    <span class="comet-button__inner">
        <span class="comet-button__text">
            Selected Option
        </span>
        <svg class="comet-button__icon comet-button__icon--right" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#triangle-down"></use>
        </svg>
    </span>
</button>
<div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="selected-option-menu" data-comet-popover-align="left">
    <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
        <ul class="comet-list-group__list">
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Action One
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row comet-list-group__row--selected">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Selected Item
                    </span>
                </a>
            </li>
            <li class="comet-list-group__row">
                <a class="comet-list-group__row-anchor" href="#">
                    <span class="comet-list-group__row-label">
                        Separate Action
                    </span>
                </a>
            </li>
        </ul>
    </div>
</div>
                
{{ comet.button_icon(
        text="Selected Option",
        class="comet-button--primary comet-dropdown-trigger js-comet-dropdown-trigger",
        icon_name="triangle-down",
        position="right",
        attrs="data-comet-popover='selected-option-menu' haspopup='true'")}}

{{ comet.dropdown_menu(id="selected-option-menu", menu_items=[
    {
        label: "Action One",
        href: "#"
    },
    {
        label: "Selected Item",
        href: "#",
        class: "comet-list-group__row--selected"
    },
    {
        label: "Separate Action",
        href: "#"
    }
]) }}
                
Macro params reference

Guidelines

  • Dropdown Menus depend on Popover javascript to function properly.
  • Dropdown triggers should have the haspopup=true property for assistive technology functionality.
  • When triggered the Dropdown should toggle the aria-expanded property between expanded and collapsed.

Use When

  • Displaying multiple related actions with a common parent context, such as an account menu with “Edit Profile” and “Sign Out” options.

Don't Use When

  • Collapsing many navigation links in a tight space. Instead, use a different pattern.

Class Reference

Class Applies to Outcome

.comet-dropdown-menu__item--separator-after

.comet-list-group__row

Adds a 1px border below the menu item

.comet-popover--top

.comet-dropdown-menu

Displays the menu above the target instead of below

Macro Reference

Parameter Values Description

id

false, string

Sets the id attribute of div.comet-dropdown-menu. Must match the data-comet-popover attribute of the triggering element

class

false, string

Adds a class or space separated list of classes to div.comet-dropdown-menu

list_group_class

false, string

Adds a class to the internal List Group component

menu_alignment

left or right

Aligns the menu to the left (default) or right of the triggering element.

menu_placement

bottom or top

Places the menu below (default) or above the triggering element.

menu_items

Array of actions (see List Group Rows Documentation)

An array of objects containing label and href keys that is passed to the internal List Group component used to generate the dropdown menu items.

Navigation Menu