TACC UI Pattern Library

Bootstrap 4: Dropdown

No notes defined.

<dl>

    <dt>Basic Dropdown</dt>
    <dd>
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown button
            </button>
            <menu class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
            </menu>
        </div>
    </dd>

    <dt>Dropdown with Divider</dt>
    <dd>
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Options
            </button>
            <menu class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                <li>
                    <a class="dropdown-item" href="#">
                        Option (above <strong>standard</strong> divider)
                    </a>
                </li>
                <li class="dropdown-divider"></li>
                <li>
                    <a class="dropdown-item" href="#">
                        Option (between <strong>different</strong> dividers)
                    </a>
                </li>
                <li>
                    <hr class="dropdown-divider">
                </li>
                <li>
                    <a class="dropdown-item" href="#">
                        Option (below <strong>non-standard</strong> divider)
                    </a>
                </li>
            </menu>
        </div>
    </dd>

    <dt>Dropdown with Active and Disabled Items</dt>
    <dd>
        <div class="dropdown">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Demo States
            </button>
            <menu class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
                <li><a class="dropdown-item" href="#">Normal item</a></li>
                <li><a class="dropdown-item active" href="#">Active item</a></li>
                <li><a class="dropdown-item" href="#">Another normal item</a></li>
                <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled item</a></li>
            </menu>
        </div>
    </dd>

</dl>
  • Content: 
    /* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */

/* All Bootstrap pattern library CSS loads for every component */
/* FAQ: To support legacy client imports, Bootstrap file organization is odd */

@import url("./bootstrap--form.demo.css");
@import url("./bootstrap--modal.demo.css");
@import url("./bootstrap--col.demo.css");
@import url("./bootstrap--pagination.demo.css");
  • URL: /components/raw/bootstrap/demo.css
  • Filesystem Path: src/lib/_imports/components/bootstrap/demo.css
  • Size: 405 Bytes 
{
  "shouldSkipPattern": true,
  "globalStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.demo.css"
    },
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.base.css"
    }
  ],
  "cmsStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.cms.css"
    }
  ],
  "docsStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.docs.css"
    }
  ],
  "portalStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.portal.css"
    }
  ],
  "subdir": "components",
  "shouldLoadBootstrap": true,
  "supportStyles": [
    "../../assets/components/bootstrap.dropdown.css"
  ]
}