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.
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.
Portals have full tone and priority support.
Low Priority (Active)
Normal Priority (Active)
High Priority (Active)
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
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
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).
||sets padding around portal text|
||sets animation speed on focus and hover|
||the color of the portal on focus and highlight|
||sets the opacity of disabled portals|
||color||—||sets the background color of active portals|
||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
--family-primary) are defined here.