Portal

An inline element for navigation


  • Display

    Inline Flex

  • Selectors

    .portal.active
  • Source

    GitHub ↗

  • Features

    TonesPriorities

Code Support Members Disabled
<div class='text-neutral-700'>
  <span class='portal'>Code</span>
  <span class='portal ~positive active' aria-selected='true'>Support</span>
  <span class='portal'>Members</span>
  <span class='portal' disabled>Disabled</span>
</div>

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>
Normal Priority (Active)
Navigate Navigate Navigate Navigate Navigate Navigate
Example code
<span class="portal ~neutral !normal active mr-2 mb-2">Navigate</span>

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

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

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

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

<span class="portal ~urge !normal 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>

Customization

Name Type Default Description
--portal-padding padding 0.15em 0.5em sets padding around portal text
--portal-transition-speed time 75ms sets animation speed on focus and hover
--portal-focus-color color var(--color-title) the color of the portal on focus and highlight
--portal-disabled-opacity opacity 0.6 sets the opacity of disabled portals
--color-fill color sets the background color of active portals
--color-content color sets the text color of active portals

You can also customize this element by simply overriding any of its CSS attributes, listed here. Contextual variable defaults (e.g., --color-content) and global variables (e.g., --family-primary) are defined here.