Dropdown

Sage dropdown


React Component

Menu Dropdown

Menu Dropdown with Arrow

Menu Button with Custom Trigger width and Custom Panel Width

Rich Text Editor Dropdown with Arrow

Dropdown menu with Headings

SageBadge Interactive, aligned right

Note: The wrapping div with inline styles is for preview-purposes only.

Select

Note: This pattern is used with the SageReact implementation, please consult UXD before using this as SageRails.

Form Field

Note: This pattern is used with the SageReact implementation, please consult UXD before using this as SageRails.

Dropdown Field with full-width Custom Content and Footer

Dropdown Menu Button with Custom Content

We can put whatever content we want in here and use the custom class as a hook to style it like a good ol BEM mixin!

Dropdown Exit

The data-sage-dropdown-exit attribute can be used on elements that need be able to close the custom panel.

Dropdown with Custom Items

While we generally recommend using the built-in items construction that comes with SageDropdown, it is possible to compose custom item content using the SageDropdownItem component and a manual loop within the sage_dropdown_items content slot. See the two examples below where custom item contents are generated for more appealing dropdown items.

As a Menu Dropdown

As a Select Dropdown

Sage Component

SageDropdown
<%
menu_items = [
  {
    attributes: { "href": "#" },
    icon: "pen",
    value: "Edit",
  },
  {
    attributes: {
      "href": "https://kajabi.com",
      "data-js-tooltip": "Tooltip",
      "data-js-tooltip-position": "right",
    },
    icon: "pen",
    modifiers: ["disabled"],
    value: "Disabled link w/ tooltip",
  },
  {
    attributes: { "href": "#" },
    icon: "add",
    style: "primary",
    value: "New",
  },
  {
    attributes: { "href": "#" },
    icon: "url",
    modifiers: ["border-before"],
    value: "Share Element",
  },
  {
    attributes: { "href": "#" },
    icon: "remove-circle",
    style: "danger",
    value: "Take A Dangerous Action",
  },
  {
    attributes: {
      "data-js-tooltip": "Tooltip",
      "data-js-tooltip-position": "right",
    },
    icon: "users",
    modifiers: ["disabled"],
    value: "Disabled w/ Tooltip",
  }
]

custom_items = [
  {
    attributes: { "href": "#" },
    value: {
      description: "Customer is chared...",
      graphic: { icon: "pen", card_color: "info" },
      name: "One-time",
    },
  },
  {
    attributes: { "href": "#" },
    value: {
      description: "Bill customers on...",
      graphic: { icon: "pen", card_color: "published" },
      name: "Subscription",
    },
  }, {
    attributes: { "href": "#" },
    value: {
      description: "Require several...",
      graphic: { icon: "pen", card_color: "approaching" },
      name: "Multi-pay",
    },
  },
]
%>

<h3 class="t-sage-heading-6">Menu Dropdown</h3>
<%= sage_component SageDropdown, { items: menu_items } do %>
  <% content_for :sage_dropdown_trigger, flush: true do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Add An Element",
    } %>
  <% end %>
<% end %>

<h3 class="t-sage-heading-6">Menu Dropdown with Arrow</h3>
<%= sage_component SageDropdown, { items: menu_items } do %>
  <% content_for :sage_dropdown_trigger, flush: true do %>
    <%= sage_component SageButton, {
      disclosure: true,
      style: "primary",
      value: "Add An Element",
    } %>
  <% end %>
<% end %>

<h3 class="t-sage-heading-6">Menu Button with Custom Trigger width and Custom Panel Width</h3>
<%= sage_component SageDropdown, {
  panel_width: "512px",
  items: menu_items,
  trigger: { width: "240px" },
} do %>
  <% content_for :sage_dropdown_trigger, flush: true do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Add An Element"
    } %>
  <% end %>
<% end %>

<h3 class="t-sage-heading-6">Rich Text Editor Dropdown with Arrow</h3>
<%= sage_component SageDropdown, { items: menu_items } do %>
  <% content_for :sage_dropdown_trigger, flush: true do %>
    <%= sage_component SageButton, {
      disclosure: true,
      icon: { name: "add", style: "only" },
      style: "secondary",
      value: "Add An Element",
    } %>
  <% end %>
<% end %>

<h3 class="t-sage-heading-6">Dropdown menu with Headings</h3>
<%= sage_component SageDropdown, {
  contained: true,
  items: [
    {
      is_heading: true,
      value: "Offers",
    },
    { value: "Grant offer" },
    { value: "Revoke offer" },
    {
      is_heading: true,
      value: "Emails",
    },
    { value: "Subscribe to Email Sequence" },
    { value: "Unsubscribe from Email Sequence" },
    {
      is_heading: true,
      value: "Events",
    },
    { value: "Register to Event" },
    { value: "Deregister from Event" },
    {
      is_heading: true,
      value: "Tags",
    },
    { value: "Add tag" },
    { value: "Remove tag" },
    {
      icon: "upload",
      modifiers: ["border-before"],
      value: "Export",
    },
    {
      icon: "remove-circle",
      value: "Unsubscribe",
    },
    {
      icon: "trash",
      modifiers: ["border-before"],
      style: "danger",
      value: "Delete",
    }
  ]
} do %>
  <% content_for :sage_dropdown_trigger, flush: true do %>
    <%= sage_component SageButton, {
      style: "secondary",
      raised: false,
      value: "Bulk Actions"
    } %>
  <% end %>
<% end %>

<h3 class="t-sage-heading-6">SageBadge Interactive, aligned right</h3>
<p>Note: The wrapping div with inline styles is for <i>preview-purposes only</i>. </p>
<div style="display: flex; flex-direction: row-reverse;">
  <%= sage_component SageDropdown, {
    align: "right",
    panel_size: "small",
    panel_type: "status",
    items: [
      {
        attributes: { "href": "#" },
        value: sage_component(SageBadge, { color: "published", value: "Publish" }),
      },
      {
        attributes: { "href": "#" },
        value: sage_component(SageBadge, { color: "info", value: "Drip" }),
      },
      {
        attributes: { "href": "#" },
        value: sage_component(SageBadge, { color: "draft", value: "Draft" }),
      },
      {
        attributes: {
          "href": "#",
          "data-test": "test method"
        },
        icon: "trash",
        style: "danger",
        value: "Delete",
      }
    ]
  } do %>
    <% content_for :sage_dropdown_trigger, flush: true do %>
      <%= sage_component SageBadge, {
        color: "info",
        icon: "draft",
        interactive_type: :dropdown,
        value: "Drip",
      } %>
    <% end %>
  <% end %>
</div>

<h3 class="t-sage-heading-6">Select</h3>
<p>Note: This pattern is used with the SageReact implementation, please consult UXD before using this as SageRails.</p>
<%= sage_component SageDropdown, {
  contained: true,
  items: [
    { value: "-- None --" },
    {
      selected: true,
      value: "Option 1",
    },
    { value: "Option 2" },
    { value: "Option 3" },
    {
      style: "muted",
      value: "Muted",
    },
    {
      modifiers: ["disabled"],
      value: "Disabled",
    },
    {
      attributes: {
        "data-js-tooltip": "Tooltip",
        "data-js-tooltip-position": "left",
      },
      modifiers: ["disabled"],
      value: "Disabled w/ tooltip",
    }
  ],
  panel_type: "searchable",
  search: true,
  trigger: {
    type: "select",
    label: "Add an Element",
    value: "",
  }
} %>

<h3 class="t-sage-heading-6">Form Field</h3>
<p>Note: This pattern is used with the SageReact implementation, please consult UXD before using this as SageRails.</p>
<%= sage_component SageDropdown, {
  align: "right",
  contained: true,
  items: [
    { value: "-- None --" },
    { value: "Option 1" },
    { value: "Option 2" },
    { value: "Option 3" },
    {
      style: "muted",
      value: "Muted",
    }
  ],
  panel_type: "searchable",
  search: true,
  trigger: {
    type: "select",
    value: "",
    label: "Add an Element",
  }
} %>

<h3 class="t-sage-heading-6">Dropdown Field with full-width Custom Content and Footer</h3>
<%= sage_component SageDropdown, {
  contained: true,
  full_width_panel: true,
  panel_type: "searchable",
  search: true,
  trigger: {
    type: "select",
    value: "",
    label: "Select Product(s)",
  },
  wrap_footer: true,
} do %>
  <% content_for :sage_dropdown_custom_panel_content do %>
    <ul class="sage-dropdown__menu sage-dropdown__menu--fixed-height">
      <% 9.times do |i| %>
        <li class="sage-dropdown__item">
          <label for="checkbox-multi-item-<%= i + 1 %>" class="sage-dropdown__item-control sage-dropdown-item-control--group">
            <%= sage_component SageCheckbox, {
              id:"checkbox-multi-item-#{i + 1}",
              css_classes: "sage-dropdown__item-checkbox",
              checked: false,
              disabled: false,
              has_error: false,
              partial_selection: false,
              standalone: true,
            } %>
            <span class="sage-dropdown__item-label">Product <%= i + 1 %></span>
          </label>
        </li>
      <% end %>
    </ul>
  <% end %>
  <% content_for :sage_dropdown_custom_panel_footer do %>
    <%= sage_component SageButtonGroup, { gap: :xs, align: "end" } do %>
      <%= sage_component SageButton, {
        value: "Clear selections",
        style: "secondary",
        raised: false,
        small: true,
      } %>
      <%= sage_component SageButton, {
        value: "Add to Offer",
        style: "primary",
        small: true,
      } %>
    <% end %>
  <% end %>
<% end %>

<h3 class="t-sage-heading-6">Dropdown Menu Button with Custom Content</h3>
<%= sage_component SageDropdown, {} do %>
  <% content_for :sage_dropdown_trigger, flush: true do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Dropdown Trigger",
    } %>
  <% end %>
  <% content_for :sage_dropdown_custom_panel_content do %>
    <%= sage_component SagePanel, {} do %>
      <%= sage_component SagePanelStack, {} do %>
        <p>We can put whatever content we want in here and use the custom class as a hook to style it like a good ol BEM mixin!</p>
        <h4>Dropdown Exit</h4>
        <p class="sage-spacer-bottom-sm">The <code>data-sage-dropdown-exit</code> attribute can be used on elements that need be able to close the custom panel.<p>
        <%= sage_component SageButton, {
          style: "primary",
          value: "Click me to exit",
          attributes: {
            "data-sage-dropdown-exit": true,
          },
        } %>
      <% end %>
    <% end %>
  <% end %>
<% end %>


<h3>Dropdown with Custom Items<h3>

<%= md("
While we generally recommend using the built-in `items` construction that comes with `SageDropdown`,
it is possible to compose custom item content using the `SageDropdownItem` component
and a manual loop within the `sage_dropdown_items` content slot.
See the two examples below where custom item contents are generated for more appealing dropdown items.
", use_sage_type: true) %>

<h4>As a Menu Dropdown</h4>

<%= sage_component SageDropdown, {} do %>
  <% content_for :sage_dropdown_trigger, flush: true do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Product",
      icon: { name: "add", style: "left" },
    } %>
  <% end %>
  <% content_for :sage_dropdown_items do %>
    <% custom_items.each do | item | %>
      <%= sage_component SageDropdownItem, {} do %>
        <%= sage_component SageCardRow, { grid_template: "et" } do %>
          <%= sage_component SageIcon, item[:value][:graphic] %>
          <%= sage_component SageCardBlock, {} do %>
            <h4><%= item[:value][:name] %></h4>
            <p><%= item[:value][:description] %></p>
          <% end %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

<h4>As a Select Dropdown</h4>

<%= sage_component SageDropdown, {
  trigger: {
    type: "select",
    label: "Select a product",
  },
  contained: true,
} do %>
  <% content_for :sage_dropdown_items do %>
    <% custom_items.each do | item | %>
      <%= sage_component SageDropdownItem, {} do %>
        <%= sage_component SageCardRow, { grid_template: "et" } do %>
          <%= sage_component SageIcon, item[:value][:graphic] %>
          <%= sage_component SageCardBlock, {} do %>
            <h4><%= item[:value][:name] %></h4>
            <p><%= item[:value][:description] %></p>
          <% end %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>
Property Description Type Default

align

Specifies which side of the button the dropdown will be aligned to. By default, this is nil, positioning the dropdown to the left edge of the button. When used inside of an Upload Card, the default behavior will instead be set to "center".

String: [ nil | "left" | "right" | "center" ]

nil (left)

contained

This uses the --contained modifier to add additional styling to the component.

Boolean

nil

customized

This uses the --customized modifier to add additional styling to the component.

Boolean

nil

custom_modifier

When set, updates styles associated with the component.

"actions", "sort"

nil

full_width_panel

Extends the dropdown panel to span the full width of the input. This setting will be overridden if align is also specified.

Boolean

nil

id

Unique identifier for this component.

String

nil

items

An array of items to be the dropdown items.

See SageDropdownItem schema below.

nil

panel_size

This component uses the --small modifier to change the default minimum width of the dropdown menu.

"small"

nil

panel_width

Sets a custom width for the dropdown panel.

"small"

nil

search

When true, adds a search component to the dropdown.

Boolean

nil

trigger

When set, this passes down to an instance of SageDropdownTrigger. It is most useful when using one of the present types such as "select".

See SageDropdownTrigger schema below.

nil

trigger_type

DEPRECATED. This provides just the type for the SageDropdownTrigger. Use the sage_dropdown_trigger slot or the trigger property instead.

"select", "select-labeled"

nil

wrap_footer

Indicates whether or not to wrap a provided sage_dropdown_custom_panel_footer with a container for fixing it to the bottom of the dropdown panel.

"select", "select-labeled"

nil

Sections

Expected contents

sage_dropdown_trigger

This area holds content that should be displayed as the trigger for the dropdown..

Typically SageButton or SageBadge

sage_dropdown_items

This area holds allows you to provide customized sets of items, typically by looping through a set of items and displaying SageDropdownItem with desired formatting for each.

Loop displaying SageDropdownItems

sage_dropdown_custom_panel_content

This area holds custom panel content and replaces the default content layout. The cta buttons for this resides within sage_dropdown_custom_panel_footer.

ul.sage-dropdown__menu.sage-dropdown__menu--fixed-height

sage_dropdown_custom_panel_footer

This area holds the dropdown menu for this component. The items that are referenced reside within sage_dropdown_custom_panel_content.

SageButtonGroup

Custom attribute Description

Usage

data-sage-dropdown-exit

This custom attribute can be used within custom dropdown panels to allow elements to close the dropdown panel with clicked.

See example "Dropdown Menu Button with Custom Content"


Subcomponent: SageDropdownItem

Property Description Type Default

attributes

Provides additional HTML attributes to the dropdown item control.

Hash

nil

icon

Specifies an icon to show before the dropdown item.

String (see Icons)

nil

is_heading

Sets whether or not this item should render as a heading.

Boolean

false

modifiers

["disabled" | "border-before" | "border-after" | ""]

``

selected

``

``

style

["primary" | "danger" | "muted"]

``

value

String

nil


Subcomponent: SageDropdownTrigger

Property Description Type Default

type

Enables one of the preset trigger types. Currently only select is supported.

"select", DEPRECATED: "select-labeled"

nil

label

Sets the tet content for the label of the trigger.

String

nil

value

Sets the value for button behind the trigger label for accessibility uses.

String

""

width

Sets a custom width for the trigger.

String

nil

Do
  • Use the aria-expanded attribute to toggle the menu off and on.