Navigation Components

Navigation Shell

Navigation Shell - основной паттерн для приложений с длинной навигацией: sticky topbar, кнопка меню, left drawer, footer.

Используйте его для:

• dashboards;
• docs;
• admin panels;
• workspace-интерфейсов;
• mobile/tablet shell.

<header class="nav-topbar">
  <button class="nav-topbar-toggle" type="button" data-navigation-toggle
    aria-controls="app-navigation" aria-expanded="false">
    <i class="ph ph-sidebar-simple"></i>
    <span>Menu</span>
  </button>
  <div class="nav-topbar-brand">
    <img src="/assets/imgs/gnexus-mark.svg" alt="" aria-hidden="true">
    <span>Product Console</span>
  </div>
  <div class="nav-topbar-current">Overview</div>
</header>

<div class="nav-drawer-backdrop" data-navigation-close></div>
<aside class="nav-drawer" id="app-navigation" data-navigation-drawer
  aria-label="Main navigation" aria-hidden="true" inert>
  <header class="nav-drawer-header">
    <div>
      <div class="nav-drawer-title">Navi</div>
      <div class="nav-drawer-subtitle">Workspace</div>
    </div>
    <button class="nav-drawer-close" type="button" data-navigation-close aria-label="Close navigation">
      <i class="ph ph-x"></i>
    </button>
  </header>

  <nav class="nav-drawer-body">
    <ul class="list list-nav">
      <li class="list-item list-item-active">
        <a class="list-action" href="/overview" data-navigation-link>
          <span class="list-label"><i class="ph ph-house"></i> Overview</span>
        </a>
      </li>
    </ul>
  </nav>

  <footer class="nav-drawer-footer">
    <span>Version 0.2</span>
    <span>© GNexus</span>
  </footer>
</aside>

Behavior:

GNexusUIKit.NavigationShell.init();

NavigationShell.init() запускается автоматически, если подключен bundle.

List Navigation

Используйте .list.list-nav внутри drawer или sidebar-like панелей.

<ul class="list list-nav">
  <li class="list-item list-item-active">
    <a class="list-action" href="#dashboard">
      <span class="list-label"><i class="ph ph-chart-bar"></i> Dashboard</span>
    </a>
  </li>
</ul>

Active state задается классом .list-item-active.

Tabs

Tabs подходят для близких представлений внутри одного контекста.

<div class="tabs" role="tablist" aria-label="View mode">
  <button class="tab tab-active" type="button" role="tab" aria-selected="true">Overview</button>
  <button class="tab" type="button" role="tab" aria-selected="false">Activity</button>
  <button class="tab" type="button" role="tab" aria-selected="false">Settings</button>
</div>

Dropdown, Tooltip, Popover

Эти паттерны живут в Navigation & Overlays.

<div class="dropdown">
  <button class="btn btn-secondary with-icon" type="button" data-dropdown-toggle aria-expanded="false">
    <i class="ph ph-dots-three-outline"></i>
    Actions
  </button>
  <div class="dropdown-menu" role="menu">
    <button class="dropdown-item" type="button" role="menuitem">Edit</button>
  </div>
</div>

GNexusUIKit.Overlays.init();

Drawer

Drawer - programmatic side panel для secondary flows. Navigation Shell использует похожий визуальный паттерн, но его markup статический.

const drawer = GNexusUIKit.Drawer.create("details", {
  title: "Details",
  bodyText: "Content",
  position: "left"
});

drawer.show();