Skip to main content Skip to navigation
View Navigation Comet

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.

Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-dropdown">
    <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>
</div>
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-dropdown">
    {{ 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: "#"
                    }
                ]) }}
</div>
                
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
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-dropdown">
    <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>
</div>
<div class="comet-dropdown">
    <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>
</div>
<div class="comet-dropdown">
    <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>
</div>
<div class="comet-dropdown">
    <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>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% set menu_items_for_all = [{ label: "Position Action One", href: "#" }, { label: "Position Action Two", href: "#" }] %}

<div class="comet-dropdown">
    {{ 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") }}
</div>
<div class="comet-dropdown">
    {{ 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") }}
</div>
<div class="comet-dropdown">
    {{ 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") }}
</div>
<div class="comet-dropdown">
    {{ 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") }}
</div>
                
Macro params reference

Trigger Elements

Use any element to trigger a dropdown.

Click Me
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-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>
</div>
<div class="comet-dropdown">
    <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>
</div>
<div class="comet-dropdown">
    <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>
</div>
<div class="comet-dropdown">
    <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>
</div>
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-dropdown">
    {{ 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") }}
</div>

<div class="comet-dropdown">
    {{ 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") }}
</div>

<div class="comet-dropdown">
    {{ 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") }}
</div>

<div class="comet-dropdown">
    <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") }}
</div>
                
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.

Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-dropdown">
    <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>
</div>
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-dropdown">
    {{ 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: "#"
            }
        ]) }}
</div>
                
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

Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-dropdown">
    <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>
</div>
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-dropdown">
    {{ 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: "#"
            }
        ]) }}
</div>
                
Macro params reference

Dark Menu

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

Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-dropdown">
    <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>
</div>
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-dropdown">
    {{ 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: "#"
            }
        ]) }}
</div>
                
Macro params reference

Subheaders

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

Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-dropdown">
    <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>
</div>
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-dropdown">
    {{ 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: "#"
            }
        ]) }}
</div>
                
Macro params reference

Selected List Option

Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-dropdown">
    <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>
</div>
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-dropdown">
    {{ 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: "#"
        }
    ]) }}
</div>
                
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.

Copyright © 2018 Discovery Education. All rights reserved. Discovery Education is a subsidiary of Discovery Communications, LLC.

Jump to page content
Navigation Menu

Comet

v2.44.1