Skip to content
7 Seventh UI CSS

Components

Bitbucket Figma

Navigation

Plain CSS implementation of the Figma Navigation section, node 2863:9305.

Default Hover Focus Pressed Disabled
Selected Selected hover Selected focus Selected pressed Selected disabled

Opening, closing, focus trapping, and route changes are owned by the consuming application.

Use aria-current="page" or .sui-navigation__item--selected for the selected item. Shell visibility and routing stay outside CSS.

<nav class="sui-navigation sui-navigation--drawer" aria-label="Primary navigation"> <div class="sui-navigation__top"> <div class="sui-navigation__header"> <button class="sui-navigation__toggle" type="button" aria-label="Toggle navigation">...</button> <div class="sui-navigation__company"><span class="sui-navigation__company-name">Profile</span></div> </div> </div> <div class="sui-navigation__body"> <a class="sui-navigation__item" href="#" aria-current="page"> <span class="sui-navigation__icon">...</span> <span class="sui-navigation__label">Label</span> </a> </div> </nav>