Skip to Main Content
Dallas College PEGASUS
Updated: Jan. 21, 2024
Skip to Main Content

Grand Dropdowns

A Grand Dropdown is a component that offers users a dropdown of links to choose from. Use it on pages or layouts that are more visual and have a list of links that don't need to take up a whole lot of space. This component is available in the following sizes:

  • standard size
  • small size

Standard Size

Heading for the dropdown

Basic Code and Classes:

  <div class="pgs-grand-dropdown">
      <h2 id="[DROPDOWN-ID]">Heading for the dropdown</h2>
      <button class="bg-cwhite button button-lg pgs-grand-dropdown__btn dropdown-toggle shadow-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-labelledby="[DROPDOWN-ID]">
          This is a grand dropdown... <span class="ico fas fa-chevron-circle-down"></span>
      </button>
      <ul class="dropdown-menu">
          <li><a href="#">Option A</a></li>
          <li><a href="#">Option B</a></li>
          <li><a href="#">Option C</a></li>
      </ul>
  </div>
  • Grand Dropdowns can be used at any width; simply wrap component within a sized <div>, or any bootstrap column

Style This Component

Notice how variations to the layout above can be made by customizing individual Pegasus elements like the following:

  • The use of a shadow on the dropdown (apply to .pgs-grand-dropdown)
  • The color of the background of the dropdown (apply to button; .bg-cwhite is used in the above example)

Accessibility Notice!

HTML attributes type, data-toggle, aria-haspopup, aria-expanded and aria-labelledby must always be used to ensure the highest level of accessibility.

Also, always use a heading above the dropdown to give users the proper context as to what type of options they can expect to find in the dropdown. Use aria-labelledby to match the ID given to the heading. This will assist users with screen readers.

Small Size

Heading for the dropdown

Code and Classes:

<div class="pgs-grand-dropdown pgs-grand-dropdown--sm">
     <h2 class="h3" id="[DROPDOWN-ID]">Heading for the dropdown</h2>
     <button class="bg-cwhite button pgs-grand-dropdown__btn dropdown-toggle shadow-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"  aria-labelledby="[DROPDOWN-ID]">
         This is a grand dropdown... <span class="ico fas fa-chevron-circle-down"></span>
     </button>
     <ul class="dropdown-menu">
         <li><a href="#">Option A</a></li>
         <li><a href="#">Option B</a></li>
         <li><a href="#">Option C</a></li>
     </ul>
</div>

Components