Components - Dropdown module

Basic example

A very basic HTML so that you can see how the component works and to be able to edit it easily.

<div class="cl-dropdown"
   ng-init="dropdown.open = false">
  <button ng-click="dropdown.open = !dropdown.open"
          ng-class="{'cl-dropdown-button-open': dropdown.open == true}"
          id="dropdown-button"
          class="cl-dropdown-button"
          aria-haspopup="true"
          aria-expanded="{{ dropdown.open == true }}">
      Menu
  </button>
  <div class="cl-dropdown-menu"
       ng-class="{'cl-dropdown-visible' : dropdown.open == true }"
       aria-labelledby="dropdown-button">
      <div class="cl-dropdown-title">
          Where to?
      </div>
      <div class="cl-dropdown-items">
          <a class="cl-dropdown-item" href="#" ng-click="">
              Explore data
          </a>
          <a class="cl-dropdown-item" href="#" ng-click="">
              Create map
          </a>
          <a class="cl-dropdown-item" href="#" ng-click="">
              Create chart
          </a>
      </div>
  </div>
  <div class="cl-dropdown-backdrop"
       ng-click="dropdown.open = ''"
       ng-show="dropdown.open != ''"></div>
</div>
/* Dropdown menu with pill styling
   ========================================================================== */
.cl-dropdown {
    display: inline-block;
    margin: 13px 0 26px 0;
    position: relative;
}
/* Button */
.cl-dropdown-button {
    font-size: 1rem;
    color: var(--text);
    border: 1px solid #cbd2db;
    border-radius: 2rem;
    background: #FFFFFF;
    padding: .37rem 1rem;
    margin-right: 6px;
    transition: all .2s;
}
.cl-dropdown-button:hover,
.cl-dropdown-button:focus {
    color: var(--links);
    border-color: var(--links);
}
.cl-dropdown-button-open {
    border-color: var(--links);
    box-shadow: 0 0 0 3px rgba(20, 46, 123, .2);
}
.cl-dropdown-button-active {
    color: var(--links);
    border-color: var(--links);
    background-color: rgba(20, 46, 123, 0.1);
}
/* Dropdown styling */
.cl-dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid #dee5ef;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.15);
    max-width: 350px;
    overflow-x: auto;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: 11;
    white-space: nowrap;
    transition: visibility 0s, opacity 0.1s ease, top 0.1s ease;
}
.cl-dropdown-visible {
    opacity: 1;
    visibility: visible;
    top: 38px;
}
/* Dropdown items */
.cl-dropdown-menu {
    padding: 26px 0;
}
.cl-dropdown-title {
    font-size: 1.3rem;
    color: var(--text);
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 26px;
}
.cl-dropdown-items {
    list-style: none;
    padding: 0 26px;
    margin: 0;
    display: flex;
    flex-direction: column;
    max-height: 180px;
    overflow-y: auto;
}
.cl-dropdown-item {
    font-size: 1rem;
    display: block;
    margin-top: 13px;
}
.cl-dropdown-item:hover {
    text-decoration: none;
}
.cl-dropdown-input {
    margin-right: 4px;
}
.cl-dropdown-label {
    display: block;
    margin-bottom: 0;
    cursor: pointer;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-left: 2px;
}
/* Backdrop */
.cl-dropdown-backdrop {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: auto;
    z-index: 10;
}

Usage example

<div class="content-card">
    <div class="row">
        <div class="col-sm-6">
            <!-- Replace this widget with your own visualisation -->
            <ods-dataset-context context="contoursgeographiquessimplifiesdesnouvellesregionsmetropole2"
             contoursgeographiquessimplifiesdesnouvellesregionsmetropole2-domain="discovery" contoursgeographiquessimplifiesdesnouvellesregionsmetropole2-dataset="contours-geographiques-simplifies-des-nouvelles-regions-metropole2">
                <ods-map no-refit="true" scroll-wheel-zoom="false" display-legend="false" display-control="false" search-box="false" toolbar-fullscreen="false" toolbar-geolocation="false" location="6,48.4292,2.21924">
                    <ods-map-layer-group>
                        <ods-map-layer context="contoursgeographiquessimplifiesdesnouvellesregionsmetropole2" color="#142E7B" picto="ods-circle" show-marker="true" display="auto" function="COUNT" shape-opacity="0.5" point-opacity="1" border-color="#FFFFFF" border-opacity="1" border-size="2" border-pattern="solid" caption="true" title="contours-geographiques-simplifies-des-nouvelles-regions-metropole2" size="4" size-min="3" size-max="5" size-function="linear"></ods-map-layer>
                    </ods-map-layer-group>
                </ods-map>
            </ods-dataset-context>
        </div>
        <div class="col-sm-6">
            <h2 class="content-card-title">
                French departments
            </h2>
            <p class="content-card-description">
                Cardano could be many technical analysis since Nexo data mining a fundamental analysis.
            </p>
            <p class="content-card-description">
                Ravencoin generates a amazing fish of lots of market cap, and Waves serves many quick anti-money laundering! Solidity allowed lots of fast peer-to-peer network.
            </p>
            <!-- Dropdown starts here -->
            <div class="cl-dropdown"
                 ng-init="dropdown.open = false">
                <button ng-click="dropdown.open = !dropdown.open"
                        ng-class="{'cl-dropdown-button-open': dropdown.open == true}"
                        id="dropdown-button"
                        class="cl-dropdown-button"
                        aria-haspopup="true"
                        aria-expanded="{{ dropdown.open == true }}">
                    More info
                </button>
                <div class="cl-dropdown-menu"
                     ng-class="{'cl-dropdown-visible' : dropdown.open == true }"
                     aria-labelledby="dropdown-button">
                    <div class="cl-dropdown-title">
                        Where to?
                    </div>
                    <div class="cl-dropdown-items">
                        <a class="cl-dropdown-item" href="#" ng-click="">
                            See dataset
                        </a>
                        <a class="cl-dropdown-item" href="#" ng-click="">
                            Create map
                        </a>
                        <a class="cl-dropdown-item" href="#" ng-click="">
                            Create graph
                        </a>
                    </div>
                </div>
                <div class="cl-dropdown-backdrop"
                     ng-click="dropdown.open = ''"
                     ng-show="dropdown.open != ''"></div>
            </div>
            <!-- Dropdown ends here -->
        </div>
    </div>
</div>
/* Dropdown menu with pill styling
   ========================================================================== */
.cl-dropdown {
    display: inline-block;
    margin: 13px 0 26px 0;
    position: relative;
}
/* Button */
.cl-dropdown-button {
    font-size: 1rem;
    color: var(--text);
    border: 1px solid #cbd2db;
    border-radius: 2rem;
    background: #FFFFFF;
    padding: .37rem 1rem;
    margin-right: 6px;
    transition: all .2s;
}
.cl-dropdown-button:hover,
.cl-dropdown-button:focus {
    color: var(--links);
    border-color: var(--links);
}
.cl-dropdown-button-open {
    border-color: var(--links);
    box-shadow: 0 0 0 3px rgba(20, 46, 123, .2);
}
.cl-dropdown-button-active {
    color: var(--links);
    border-color: var(--links);
    background-color: rgba(20, 46, 123, 0.1);
}
/* Dropdown styling */
.cl-dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid #dee5ef;
	max-width: 350px;
    overflow-x: auto;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.15);
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: 11;
    white-space: nowrap;
    transition: visibility 0s, opacity 0.1s ease, top 0.1s ease;
}
.cl-dropdown-visible {
    opacity: 1;
    visibility: visible;
    top: 38px;
}
/* Dropdown items */
.cl-dropdown-menu {
    padding: 26px 0;
}
.cl-dropdown-title {
    font-size: 1.3rem;
    color: var(--text);
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 26px;
}
.cl-dropdown-items {
    list-style: none;
    padding: 0 26px;
    margin: 0;
    display: flex;
    flex-direction: column;
    max-height: 180px;
    overflow-y: auto;
}
.cl-dropdown-item {
    font-size: 1rem;
    display: block;
    margin-top: 13px;
}
.cl-dropdown-item:hover {
    text-decoration: none;
}
.cl-dropdown-input {
    margin-right: 4px;
}
.cl-dropdown-label {
    display: block;
    margin-bottom: 0;
    cursor: pointer;
	max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-left: 2px;
}
/* Backdrop */
.cl-dropdown-backdrop {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: auto;
	z-index: 10;
}
/* Class used to center the content within the card */
.centered-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
/* Content Card
   ========================================================================== */
.content-card {
	background-color: var(--boxes-background);
	padding: 26px;
	border-radius: 4px;
	margin-bottom: 20px;
	height: 100%;
}
.content-card-title {
	color: var(--titles);
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 13px;
	max-width: 100%;
}
.content-card-description {
	color: var(--text);
	font-size: 1rem;
	line-height: 1.5;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 26px;
	max-width: 100%;
}
.content-card-icon {
	color: var(--highlight);
	font-size: 2rem;
	margin-bottom: 13px;
	max-width: 100%;
}
.content-card-link {
	color: var(--links);
	font-weight: bold;
	transition: all .2s;
	opacity: 1;
	max-width: 100%;
}
.content-card-link:hover {
	opacity: .7;
	text-decoration: none;
}
.content-card-button {
	color: var(--highlight);
	border: 1px solid var(--highlight);
    background: transparent;
	display: inline-block;
	text-align: center;
	font-size: .867rem;
    border-radius: 4px;
    padding: .5rem 1.15rem;
    text-decoration: none;
    transition: all .2s;
}
.content-card-button:hover {
	background-color: var(--highlight);
	color: #FFFFFF;
	text-decoration: none;
}

Use this component to have a more stylized look for your filters, for example instead of using a select.

<div class="ods-box">
    <!-- Important here: the disjunctive (multi filter) mode for the facet to still display other values even if one is selected -->
    <ods-dataset-context context="universities"
                         universities-domain="public"
                         universities-dataset="shanghai-world-university-ranking"
                         universities-parameters="{'disjunctive.country':true}">
        <div class="row">
            <div class="col-sm-4"
                 ods-facet-results="countries"
                 ods-facet-results-context="universities"
                 ods-facet-results-facet-name="country"
                 ods-facet-results-sort="alphanum">
                <h3>
                    Select a country to view universities
                </h3>
                <!-- Dropdown starts here -->
                <div class="cl-dropdown"
                     ng-init="dropdown.open = ''">
                    <button ng-click="dropdown.open = (dropdown.open == 'country' ? '' : 'country');"
                            ng-class="{'cl-dropdown-button-active': universities.parameters['refine.country'],
                                      'cl-dropdown-button-open': dropdown.open == 'country'}"
                            id="dropdown-button"
                            class="cl-dropdown-button"
                            aria-haspopup="true"
                            aria-expanded="{{ dropdown.open == 'country' }}">
                        {{ (!universities.parameters['refine.country'] ? 'Country' : universities.parameters['refine.country'] | capitalize) }}
                    </button>
                    <div class="cl-dropdown-menu"
                         ng-class="{'cl-dropdown-visible' : dropdown.open == 'country' }"
                         aria-labelledby="dropdown-button">
                        <div class="cl-dropdown-title">
                            Country
                        </div>
                        <ul class="cl-dropdown-items">
                            <li class="cl-dropdown-item">
                                <label class="cl-dropdown-label">
                                    <input ng-model="universities.parameters['refine.country']"
                                           ng-value="All"
                                           name="country"
                                           type="radio"
                                           class="cl-dropdown-input" />
                                    All countries
                                </label>
                            </li>
                            <li ng-repeat="country in countries"
                                class="cl-dropdown-item">
                                <label class="cl-dropdown-label">
                                    <input ng-model="universities.parameters['refine.country']"
                                           ng-value="country.path"
                                           name="country"
                                           class="cl-dropdown-input"
                                           type="radio" />
                                    {{ country.path | capitalize }}
                                </label>
                            </li>
                        </ul>
                        {{universities.parameters['refine.country'] = (universities.parameters['refine.country'] == 'All' ? undefined : universities.parameters['refine.country']); ''}}
                    </div>
                    <div class="cl-dropdown-backdrop"
                         ng-click="dropdown.open = ''"
                         ng-show="dropdown.open != ''"></div>
                </div>
                <!-- Dropdown ends here -->
            </div>
            <div class="col-sm-8">
                <ods-map context="universities"></ods-map>
                <ods-table context="universities"></ods-table>
            </div>
        </div>
    </ods-dataset-context>
</div>
/* Dropdown menu with pill styling
   ========================================================================== */
.cl-dropdown {
    display: inline-block;
    margin: 13px 0 26px 0;
    position: relative;
}
/* Button */
.cl-dropdown-button {
    font-size: 1rem;
    color: var(--text);
    border: 1px solid #cbd2db;
    border-radius: 2rem;
    background: #FFFFFF;
    padding: .37rem 1rem;
    margin-right: 6px;
    transition: all .2s;
}
.cl-dropdown-button:hover,
.cl-dropdown-button:focus {
    color: var(--links);
    border-color: var(--links);
}
.cl-dropdown-button-open {
    border-color: var(--links);
    box-shadow: 0 0 0 3px rgba(20, 46, 123, .2);
}
.cl-dropdown-button-active {
    color: var(--links);
    border-color: var(--links);
    background-color: rgba(20, 46, 123, 0.1);
}
/* Dropdown styling */
.cl-dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid #dee5ef;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.15);
    max-width: 350px;
    overflow-x: auto;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: 11;
    white-space: nowrap;
    transition: visibility 0s, opacity 0.1s ease, top 0.1s ease;
}
.cl-dropdown-visible {
    opacity: 1;
    visibility: visible;
    top: 38px;
}
/* Dropdown items */
.cl-dropdown-menu {
    padding: 26px 0;
}
.cl-dropdown-title {
    font-size: 1.3rem;
    color: var(--text);
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 26px;
}
.cl-dropdown-items {
    list-style: none;
    padding: 0 26px;
    margin: 0;
    display: flex;
    flex-direction: column;
    max-height: 180px;
    overflow-y: auto;
}
.cl-dropdown-item {
    font-size: 1rem;
    display: block;
    margin-top: 13px;
}
.cl-dropdown-item:hover {
    text-decoration: none;
}
.cl-dropdown-input {
    margin-right: 4px;
}
.cl-dropdown-label {
    display: block;
    margin-bottom: 0;
    cursor: pointer;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-left: 2px;
}
/* Backdrop */
.cl-dropdown-backdrop {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: auto;
    z-index: 10;
}