Site selector

The Site selector component provides a compact way to switch between sites or audiences.

Standard site selector

A compact selector for switching between related sites or audiences. The current site is highlighted and cannot be selected again.

<div class="c-siteselector c-siteselector--radius-full c-siteselector--primary" data-component="siteselector">
  <!-- nav.blade.php -->
  <ul class="c-nav c-siteselector__items c-nav--depth-1 unlist c-nav--horizontal" aria-orientation="horizontal" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6ab10232b8765"
  data-component="nav">
    <li id="6ab10232b8765-4508640802077982639-0__item" class="c-siteselector__item c-nav__item c-nav__item--default c-nav__item--depth-1 is-current" role="menuitem" data-depth="1" aria-label=
    "This site">
      <div class="c-nav__item-wrapper">
        <a class="c-link c-nav__link" href="https://styleguide.getmunicipio.com" target="_top" id="id_6ab10232b8765-4508640802077982639-0__label" data-component="link"><span class="c-nav__text"
        style="">This site</span></a>
      </div>
    </li>
    <li id="6ab10232b8765-3911146242010282344-1__item" class="c-siteselector__item c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Google">
      <div class="c-nav__item-wrapper">
        <a class="c-link c-nav__link" href="https://google.com" target="_top" id="id_6ab10232b8765-3911146242010282344-1__label" data-component="link"><span class="c-nav__text" style=
        "">Google</span></a>
      </div>
    </li>
    <li id="6ab10232b8765-2705614292211391341-2__item" class="c-siteselector__item c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Facebook">
      <div class="c-nav__item-wrapper">
        <a class="c-link c-nav__link" href="https://facebook.com" target="_top" id="id_6ab10232b8765-2705614292211391341-2__label" data-component="link"><span class="c-nav__text" style=
        "">Facebook</span></a>
      </div>
    </li>
    <li id="6ab10232b8765-4829157732927742980-3__item" class="c-siteselector__item c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Twitter">
      <div class="c-nav__item-wrapper">
        <a class="c-link c-nav__link" href="https://twitter.com" target="_top" id="id_6ab10232b8765-4829157732927742980-3__label" data-component="link"><span class="c-nav__text" style=
        "">Twitter</span></a>
      </div>
    </li>
  </ul>
</div>

@siteselector([
    'items' => [
        ['label' => 'This site', 'href' => 'https://' . ($_SERVER['HTTP_HOST'] ?? '')],
        ['label' => 'Google', 'href' => 'https://google.com'],
        ['label' => 'Facebook', 'href' => 'https://facebook.com'],
        ['label' => 'Twitter', 'href' => 'https://twitter.com']
    ]
])
@endsiteselector

Overflowing items

Additional sites are grouped into the popover when the visible item limit is reached.

<div class="c-siteselector c-siteselector--radius-full c-siteselector--primary" data-component="siteselector">
  <!-- nav.blade.php -->
  <ul class="c-nav c-siteselector__items c-nav--depth-1 unlist c-nav--horizontal" aria-orientation="horizontal" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6ab10232b8f97"
  data-component="nav">
    <li id="6ab10232b8f97-3470129238577983731-0__item" class="c-siteselector__item c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Google">
      <div class="c-nav__item-wrapper">
        <a class="c-link c-nav__link" href="https://google.com" target="_top" id="id_6ab10232b8f97-3470129238577983731-0__label" data-component="link"><span class="c-nav__text" style=
        "">Google</span></a>
      </div>
    </li>
    <li id="6ab10232b8f97-7605795446851444879-1__item" class="c-siteselector__item c-nav__item c-nav__item--default c-nav__item--depth-1 is-current" role="menuitem" data-depth="1" aria-label=
    "This site">
      <div class="c-nav__item-wrapper">
        <a class="c-link c-nav__link" href="https://styleguide.getmunicipio.com" target="_top" id="id_6ab10232b8f97-7605795446851444879-1__label" data-component="link"><span class="c-nav__text"
        style="">This site</span></a>
      </div>
    </li>
    <li id="6ab10232b8f97-expand-2__item" class="c-siteselector__more c-nav__item c-nav__item--default c-nav__item--depth-1 has-fetched has-children has-toggle" role="menuitem" data-depth="1"
    aria-label="" data-js-popover-relative="popover_6ab10232b8f97-expand-2__children-popover">
      <div class="c-nav__item-wrapper">
        <!-- Hidden link: Both label and icon is missing -->
         <button class="c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand" aria-pressed="false" popovertarget=
        "popover_6ab10232b8f97-expand-2__children-popover" popovertargetaction="toggle" aria-haspopup="menu" type="button" data-component="button"><span class="c-button__label"><span class=
        "c-button__label-icon"><!-- icon.blade.php -->
         </span></span></button>
      </div>
      <div class="c-element c-nav__popover c-popover" popover="auto" data-js-popover-relative="true" data-js-popover-horizontal-placement="left" data-js-popover-vertical-placement="bottom" id=
      "popover_6ab10232b8f97-expand-2__children-popover" data-component="element">
        <!-- nav.blade.php -->
        <div class="c-element c-nav__child-container" data-component="element">
          <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6ab10232b970a"
          data-component="nav">
            <li id="6ab10232b970a-8667156108852962826-0__item" class="c-siteselector__item c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Facebook">
              <div class="c-nav__item-wrapper">
                <a class="c-link c-nav__link" href="https://facebook.com" target="_top" id="id_6ab10232b970a-8667156108852962826-0__label" data-component="link"><span class="c-nav__text" style=
                "">Facebook</span></a>
              </div>
            </li>
            <li id="6ab10232b970a-8350985801692975767-1__item" class="c-siteselector__item c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Twitter">
              <div class="c-nav__item-wrapper">
                <a class="c-link c-nav__link" href="https://twitter.com" target="_top" id="id_6ab10232b970a-8350985801692975767-1__label" data-component="link"><span class="c-nav__text" style=
                "">Twitter</span></a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</div>

@siteselector([
    'maxItems' => 2,
    'items' => [
        ['label' => 'Google', 'href' => 'https://google.com'],
        ['label' => 'This site', 'href' => 'https://' . ($_SERVER['HTTP_HOST'] ?? '')],
        ['label' => 'Facebook', 'href' => 'https://facebook.com'],
        ['label' => 'Twitter', 'href' => 'https://twitter.com']
    ]
])
@endsiteselector

API

Parameter	Default	Type	Description
element	div	string	-
items	[]	array	-
maxItems	false	integer\|boolean	-
showMoreLabel		string	-
radius	full	string	-
color	primary	string	-

CSS API

Variable	Default	Type	Values	Description
--c-siteselector--base	var(--base)	range	-	Main unit that drives radius and spacing scales.
--c-siteselector--border-radius	var(--border-radius)	range	-	Border radius
--c-siteselector--border-width	var(--border-width)	range	-	Border width
--c-siteselector--corner-shape	var(--corner-shape)	select	square, round, squircle, circular, bevel, scoop	Corner shape
--c-siteselector--color--primary	var(--color--primary)	color	-	Background color
--c-siteselector--color--primary-contrast	var(--color--primary-contrast)	color	-	Primary Contrast
--c-siteselector--color--primary-alt	var(--color--primary-alt)	color	-	Manual companion token for subtle primary surfaces.
--c-siteselector--color--primary-border	var(--color--primary-border)	color	-	Manual companion token for primary border and hover states.
--c-siteselector--size	var(--c-siteselector--size-md)	select	var(--c-siteselector--size-sm), var(--c-siteselector--size-md), var(--c-siteselector--size-lg)	Controls the height using the same small, medium, and large steps as filled buttons.

Similar components

Nav Segment