Overview

The portal is a navigation element that is helpful for cases in which many links need to be displayed together — for example, in a navigation pane or sidebar. Generally, a portal shouldn’t affect anything other than the current view. (It’s inappropriate to bind actions like “save” or “delete” to a portal; use a button instead.)

Portals only adopt any meaningful styling when used with the .active selector. If the active selector is not present, the text color and background will not be changed.

Considerations

Padding — In order to make portals look consistent when placed next to one another, all portals have a default padding applied. Because inactive portals don’t have a background color, this additional padding can resemble a margin. If you’re including other elements (such as a label or supra) in your list of portals, consider applying the .portal selector on top. (E.g., <label class="label portal">.)

Disabled state — Just because a portal is marked as disabled doesn’t mean that it’s not still interactive. If you’re using a portal with an <a> tag, for example, the href attribute will remain set even if you add the disabled attribute. While the cursor will be changed to not-allowed, it will potentially remain focusable and clickable.

Variants

Portals have full tone and priority support.

Low Priority (Active)

Navigate Navigate Navigate Navigate Navigate Navigate

Example code

<span class="portal ~neutral @low active mr-2 mb-2">Navigate</span>

<span class="portal ~positive @low active mr-2 mb-2">Navigate</span>

<span class="portal ~warning @low active mr-2 mb-2">Navigate</span>

<span class="portal ~critical @low active mr-2 mb-2">Navigate</span>

<span class="portal ~info @low active mr-2 mb-2">Navigate</span>

<span class="portal ~urge @low active mr-2 mb-2">Navigate</span>

High Priority (Active)

Navigate Navigate Navigate Navigate Navigate Navigate

Example code

<span class="portal ~neutral @high active mr-2 mb-2">Navigate</span>

<span class="portal ~positive @high active mr-2 mb-2">Navigate</span>

<span class="portal ~warning @high active mr-2 mb-2">Navigate</span>

<span class="portal ~critical @high active mr-2 mb-2">Navigate</span>

<span class="portal ~info @high active mr-2 mb-2">Navigate</span>

<span class="portal ~urge @high active mr-2 mb-2">Navigate</span>

Accessibility

Be mindful of all possible states. Not everyone interacts with a portal by moving the mouse to click or hover on it. Some use the tab key to navigate, and others use non-graphical interfaces entirely. While these concerns generally don’t apply to portals being used as

Apply ARIA labels where appropriate. Applying the .active selector to mark a portal as currently active is sufficient for visual users, however it’s still important to mark the portal as active using the aria-selected attribute.

Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a title attribute.

Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!

Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).

Examples

Items

Item 1

Item 2

Item 3

Item 4

Example code

<p class="portal supra pointer-events-none">Items</p>
<p><span class="portal">Item 1</span></p>
<p><span class="portal ~info active">Item 2</span></p>
<p><span class="portal">Item 3</span></p>
<p><span class="portal">Item 4</span></p>