App Side Nav

The App Side Nav provides users with access to contextual navigation within areas of the application and generally includes subpages and nested pages within projects and organizations.

Usage

When to use

• When navigating between subpages and nested pages within the application.

When not to use

• For global navigation across an application, use the App Header instead.
• To move between views within the same context or page, consider Tabs.

Body

The body consists of a group of sections with vertical lists of links, typically to the most important parts of the application. Any generic content or component is also supported by an additional generic container.

List

With title

• A title can help users scan the sections and provide context about the links inside each section.
• Titles should be meaningful and related to the content within the section.

Without title

List items

Without icon

With icon

• Use icons to help users recognize and scan the links they are paired with.
• We recommend only using icons in the main or top level navigation.
• Avoid overwriting color styles in icons.

With badge

With count

With nested items

Mark a link as having sub-items to show that it opens a nested level of navigation.

External links

Use external to show that the list item is a hyperlink pointing to a page outside the product or platform.

Generic content

The body container can also hold content above and below the list: text, your own elements or i80 elements.

Positioning, and responsive behavior

The App Side Nav should always be positioned on the left side of the viewport, occupying 100% of the viewport height to ensure that the navigation is always visible and accessible to the user.

On smaller viewports, the App Side Nav should collapse to maximize the available real estate on tablet and mobile devices. By tapping the menu icon, users can expand and access the full menu when needed.

Collapse functionality

A responsive App Side Nav carries a collapse toggle button, so users can expand and collapse it themselves.

On smaller viewports, the App Side Nav will be rendered in its collapsed state by default and will overlay the main page content in its expanded state.

Collapsed reflow

The collapse functionality of the App Side Nav gives control to the end-user to unlock more horizontal space in the main page. Thus, the main page content should reflow or reposition to occupy this space if the App Side Nav is in its collapsed state. If the main page content has a predetermined maximum width that is reached when the App Side Nav collapses, the content should transition smoothly to the new center of the main page area.

This is handled out of the box by the AppFrame component, but may need to be accounted for in custom implementations of the application/page layout.

This section provides in-depth instructions on how consumers can use the full-featured App Side Nav (<i80-app-side-nav>) to build a “standard” sidebar navigation with responsive behavior, animations/transitions, etc.

Given the complexity and level of customization that an application’s navigation may require, it is not possible to cover all the possible use cases in this documentation. For this reason, if you need to implement a navigation element using this component, contact the Design Systems Team for support.

Full-featured component

The App Side Nav provides a set of advanced features out of the box: layout, content, responsiveness, accessibility.

Layout

The App Side Nav component provides a top-level layout for the sidebar navigation.

Consumers place the navigation content inside the element and add business logic to control the content within it.

<i80-app-side-nav style="height: 320px">
  <i80-nav-link href="#dashboard" icon="dashboard" active>Dashboard</i80-nav-link>
  <i80-nav-title>Services</i80-nav-title>
  <i80-nav-link href="#boundary" icon="shield">Boundary</i80-nav-link>
  <i80-nav-link href="#consul" icon="server">Consul</i80-nav-link>
  <i80-nav-link href="#vault" icon="lock">Vault</i80-nav-link>
</i80-app-side-nav>

It also comes with a set of CSS properties that automatically set the App Side Nav in a fixed position on the left of the application frame, and force it to occupy the full height of the window.

Content

Standard I80 Button and Dropdown components can also be used within the App Side Nav where needed.

The App Side Nav is an agnostic container, in which consumers can in principle add anything they want, in the order they want.

That said, to create consistent experiences for our end-users, it’s very likely that the choice of what to use will fall on the navigation items themselves — <i80-nav-title> and <i80-nav-link>, placed straight inside <i80-app-side-nav>.

The navigation items

The list items are the fundamental building blocks of the navigation. The App Side Nav generates a <nav> element, containing a <ul> list of “items”, and each item you write inside it is rendered as an HTML <li> element. There are a few different variants of items:

• <i80-nav-title> - used to provide a title to a specific “section” of the list; it accepts any content, applying specific color and typographic styles to it.
• <i80-nav-link> - used to render a “link” item that navigates the user to a specific page or resource; it exposes a set of different attributes, to allow the consumers specific customizations.
• <i80-nav-link back> - a simplified version of the link element, used to take “back” the user to a previous page or navigation state; it shows a leading “left chevron” by default, and accepts a plain text string as its label.

Below is an example (with simplified code for better readability) of how these elements could be used to build different specific navigation items:

<i80-app-side-nav style="height: 420px">
  <i80-nav-link href="#" back>A “back” link</i80-nav-link>
  <i80-nav-title>A section title</i80-nav-title>
  <i80-nav-link href="#">A link with just text</i80-nav-link>
  <i80-nav-link href="#" icon="network">A link with an icon</i80-nav-link>
  <i80-nav-link href="#" icon="users" count="12">With a “count”</i80-nav-link>
  <i80-nav-link href="#" icon="credit-card" badge="Beta">With a “badge”</i80-nav-link>
  <i80-nav-link href="#" icon="guide" external>As an “external” link</i80-nav-link>
</i80-app-side-nav>

For more details about how to use these elements, refer to the “Attributes” section.

Responsiveness

As mentioned above, the full-fledged App Side Nav is “responsive” by default:

• when the viewport is desktop, the sidebar navigation is static and has a fixed width
  • the width at which the viewport is considered “desktop” can be overwritten using the breakpoint attribute
• when the viewport is mobile, the sidebar navigation is responsive and the user can minimize or maximize its width via a toggle button (the component will take care automatically of the transitions between these two states)
  • in this case the App Side Nav occupies only a minimum width in terms of page layout, even when expanded (it partially covers the main content)
  • a toggle button is added to the App Side Nav, used to expand/minimize its width
  • an overlay is automatically added to the main content area so that the user can’t interact with it while the App Side Nav is opened (if the user clicks on the overlay, the App Side Nav closes and returns to its minimized state; the same happens if the user presses the esc key)

This “responsive” behavior can be turned off with responsive="false" on <i80-app-side-nav>.

Notice that even if responsiveness is turned off, some JavaScript is executed anyway in the background, and events listeners are attached to some DOM elements (even if these functionality are not used).

Logical and visual states

When the component is “responsive” there are different “states” (and associated logic) for different combinations of these three parameters:

• whether the navigation is responsive
• whether the viewport is desktop
• whether the navigation is minimized

Each one of these states has CSS class names associated, and they’re used by the component code to determine what layout to render for the sidebar navigation.

Content transitions between states

The App Side Nav component automatically:

• fades in/out the content in the navigation
• swaps the toggle button icon between its two states and moves it from one position to another

More specifically, the animation is:

• minimized → maximized transition: the content appears with a fade-in effect, when the width animation is already completed (the width is maximized)
• maximized → minimized transition: the content disappears at once with no transition, before the width animation starts

Any other content in the App Side Nav needs to be explicitly handled by the consumers (in this way they have full control of the content they add, and they can customize the transition as they want/need).

Advanced customization

Some aspects of the responsiveness/animation/transition of the App Side Nav are parameterized in code via CSS custom properties. It means that in theory they could be customized/overwritten. This though is something that we don’t recommend.

Navigation is a cardinal element of the UI of an application, and its standardization across the different i80 products is an important end goal. Also, the implementation of this component has required considerable efforts and investments, and we should preserve it as much as possible as a unifying element across products.

If you find yourself in the situation of wanting/needing to customize or change the aspect or the behavior of the App Side Nav component, contact the Design Systems Team for support.

Accessibility

Since this component is layout-only, there are no built-in accessibility features: you are responsible for making sure your custom App Side Nav implementation is conformant to the WCAG requirements.

aria attributes

The App Side Nav component already provides some of the required aria attributes. But other attributes are needed when declaring its content. Please refer to the Accessibility section for more details.

Animations

Animations and transition on the component will not take place if the user has prefers-reduced-motion enabled in their browser or operating system.

Attributes

<i80-app-side-nav> renders this component. Everything it understands:

The tag keeps any native element you write inside it, so a server-rendered form, link or button works as it is. See Web Components for loading i80.js and the reference for these examples running.

Anatomy

Conformance rating

When used as recommended, there should not be any WCAG conformance issues with this component.

Applicable WCAG Success Criteria

This section is for reference only. This component intends to conform to the following WCAG Success Criteria:

Support

If any accessibility issues have been found within this component, let us know by submitting an issue.

0.1.0

Første i80-version (fork af upstream, se core/UPSTREAM.md).