Contents Menu Expand Light mode Dark mode Auto light/dark mode
GNOME Human Interface Guidelines
Logo
GNOME Human Interface Guidelines
  • Design Principles
  • Tools & Resources
  • Guidelines
    • App Naming
    • App Icons
    • Pointer & Touch
    • Keyboard
    • UI Icons
    • UI Styling
    • Writing Style
    • Typography
    • Navigation
    • Scaling & Adaptiveness
    • Accessibility
  • Patterns
    • Containers
      • Windows
      • Header Bars
      • Popovers
      • Utility Panes
      • Boxed Lists
      • Grid Views
      • List & Column Views
      • Selection & Edit Modes
    • Navigation
      • Browsing
      • View Switchers
      • Tabs
      • Sidebars
      • Search
    • Controls
      • Buttons
      • Menus
      • Switches
      • Text Fields
      • Checkboxes
      • Radio Buttons
      • Drop-Down Lists
      • Sliders
      • Spin Buttons
      • Overlaid Controls
    • Feedback
      • Notifications
      • Toasts
      • Banners
      • Progress Bars
      • Spinners
      • Dialogs
      • Placeholder Pages
      • Tooltips
  • Reference
    • Standard Keyboard Shortcuts
    • Palette
    • Backgrounds
Back to top
Edit this page

Drop-Down Lists#

Drop-down lists are used to select an item from a mutually exclusive set of options.

A drop-down list example can be found in the Lists → Selections demo in the GTK 4 demo app.

When to Use#

Drop-down lists are typically appropriate when:

  • the list of options is long

  • the contents of the hidden part of the menu are obvious from its label and the one selected item (for example, a “Month” drop-down with the item “January” selected suggests what the other options will be)

  • there is little available space, such as in header bars

If these factors don’t apply, a radio button might be a better choice, since radio buttons present all the available options without the need to explicitly expose them.

Guidelines#

  • Do not use drop-down lists with fewer than three items. To offer a choice of two options, use radio or toggle buttons.

  • Label drop-down lists using sentence capitalization. Provide an access key in the label that allows the user to focus the drop-down list.

  • Use sentence capitalization for drop-down list items.

  • Assign an access key to every drop-down list item. Ensure each access key is unique within the enclosing window or dialog, not just within the menu.

API Reference#

  • GTK 4: GtkDropDown

Next
Sliders
Previous
Radio Buttons
On this page
  • Drop-Down Lists
    • When to Use
    • Guidelines
    • API Reference