Menus

Menus

Sections

    Overview of CSS Classes

    Selector.slds-dropdown-trigger
    Summary

    Initializes a trigger element around the dropdown

    Restrictdiv, span, li
    VariantTrue
    Selector.slds-dropdown-trigger_hover
    Summary

    If someone is using javascript for click to toggle - this modifier will help

    Restrict.slds-dropdown-trigger
    Selector.slds-dropdown-trigger_click
    Summary

    If someone is using javascript for click to toggle - this modifier will help

    Restrict.slds-dropdown-trigger
    Selector.slds-is-open
    Summary

    Opens dropdown menu when invoked on click

    Restrict.slds-dropdown-trigger_click
    ModifierTrue
    Selector.slds-dropdown
    Summary

    Initializes dropdown

    Restrict.slds-dropdown-trigger div, .slds-dropdown-trigger ul, .slds-docked-composer_overflow div
    Selector.slds-dropdown_left
    Summary

    Positions dropdown to left side of target

    Restrict.slds-dropdown
    ModifierTrue
    Selector.slds-dropdown_right
    Summary

    Positions dropdown to right side of target

    Restrict.slds-dropdown
    ModifierTrue
    Selector.slds-dropdown_bottom
    Summary

    Positions dropdown to above target

    Restrict.slds-dropdown
    ModifierTrue
    Selector.slds-dropdown_xx-small
    Summary

    Sets min-width of 6rem/96px

    Restrict.slds-dropdown
    ModifierTrue
    Selector.slds-dropdown_x-small
    Summary

    Sets min-width of 12rem/192px

    Restrict.slds-dropdown
    ModifierTrue
    Selector.slds-dropdown_small
    Summary

    Sets min-width of 15rem/240px

    Restrict.slds-dropdown
    ModifierTrue
    Selector.slds-dropdown_medium
    Summary

    Sets min-width of 20rem/320px

    Restrict.slds-dropdown
    ModifierTrue
    Selector.slds-dropdown_large
    Summary

    Sets min-width of 25rem/400px

    Restrict.slds-dropdown
    ModifierTrue
    Selector.slds-dropdown_length-5
    Summary

    Forces overflow scrolling after 5 list items

    Restrict.slds-dropdown, .slds-dropdown__list, .slds-listbox
    ModifierTrue
    Selector.slds-dropdown_length-7
    Summary

    Forces overflow scrolling after 7 list items

    Restrict.slds-dropdown, .slds-dropdown__list, .slds-listbox
    ModifierTrue
    Selector.slds-dropdown_length-10
    Summary

    Forces overflow scrolling after 10 list items

    Restrict.slds-dropdown, .slds-dropdown__list, .slds-listbox
    ModifierTrue
    Selector.slds-dropdown_length-with-icon-5
    Summary

    Forces overflow scrolling after 5 list items with an icon

    Restrict.slds-dropdown, .slds-dropdown__list, .slds-listbox
    ModifierTrue
    Selector.slds-dropdown_length-with-icon-7
    Summary

    Forces overflow scrolling after 7 list items with an icon

    Restrict.slds-dropdown, .slds-dropdown__list, .slds-listbox
    ModifierTrue
    Selector.slds-dropdown_length-with-icon-10
    Summary

    Forces overflow scrolling after 10 list items with an icon

    Restrict.slds-dropdown, .slds-dropdown__list, .slds-listbox
    ModifierTrue
    Selector.slds-dropdown_inverse
    Summary

    Theme

    Restrict.slds-dropdown
    ModifierTrue
    Selector.slds-dropdown__header
    Summary

    Adds padding to area above dropdown menu list

    Restrict.slds-dropdown li
    Selector.slds-dropdown__item
    Summary

    Initializes dropdown item

    Restrict.slds-dropdown li
    Selector.slds-is-unsaved
    Summary

    Dirty state for a nav item

    Restrict.slds-context-bar__item, .slds-dropdown__item
    Selector.slds-icon_selected
    Summary

    If menu contains menuitemcheckbox then this toggles the selected icon when it is selected

    Restrict.slds-dropdown__item svg
    Selector.slds-is-selected
    Summary

    If menu contains menuitemcheckbox then this handles the selected states

    Restrict.slds-dropdown__item
    ModifierTrue
    Selector.slds-has-submenu
    Summary

    true

    Restrict.slds-dropdown__item
    VariantTrue
    Selector.slds-dropdown_submenu
    Summary

    true

    Restrict.slds-has-submenu div
    Selector.slds-dropdown_submenu-left
    Summary

    Open submenu to the left of the parent menu item

    Restrict.slds-dropdown_submenu
    ModifierTrue
    Selector.slds-dropdown_submenu-right
    Summary

    Open submenu to the right of the parent menu item

    Restrict.slds-dropdown_submenu
    ModifierTrue
    Selector.slds-dropdown_submenu-bottom
    Summary

    Open submenu along the bottom of the parent menu item

    Restrict.slds-dropdown_submenu
    Selector.slds-has-notification
    Summary

    Creates styles for a Tab Item when its tab has new activity in

    Restrict.slds-tabs_default__item, .slds-dropdown__item
    Selector.slds-indicator_unread
    Summary

    Unread notification icon

    Restrict.slds-has-notification span
    Selector.slds-nubbin_top
    Summary
    Restrict.slds-popover, .slds-dropdown
    ModifierTrue
    Selector.slds-nubbin_top-left
    Summary
    Restrict.slds-popover, .slds-dropdown
    ModifierTrue
    Selector.slds-nubbin_top-right
    Summary
    Restrict.slds-popover, .slds-dropdown
    ModifierTrue
    Selector.slds-nubbin_bottom
    Summary
    Restrict.slds-popover, .slds-dropdown
    ModifierTrue
    Selector.slds-nubbin_bottom-left
    Summary
    Restrict.slds-popover, .slds-dropdown
    ModifierTrue
    Selector.slds-nubbin_bottom-right
    Summary
    Restrict.slds-popover, .slds-dropdown
    ModifierTrue
    Selector.slds-nubbin_left
    Summary
    Restrict.slds-popover, .slds-dropdown
    ModifierTrue
    Selector.slds-nubbin_left-top
    Summary
    Restrict.slds-popover, .slds-dropdown
    ModifierTrue
    Selector.slds-nubbin_left-bottom
    Summary
    Restrict.slds-popover, .slds-dropdown
    ModifierTrue
    Selector.slds-nubbin_right
    Summary
    Restrict.slds-popover, .slds-dropdown
    ModifierTrue
    Selector.slds-nubbin_right-top
    Summary
    Restrict.slds-popover, .slds-dropdown
    ModifierTrue
    Selector.slds-nubbin_right-bottom
    Summary
    Restrict.slds-popover, .slds-dropdown
    ModifierTrue