# Navigation Components
## Navigation Shell
Navigation Shell - основной паттерн для приложений с длинной навигацией: sticky topbar, кнопка меню, left drawer, footer.
Используйте его для:
- dashboards;
- docs;
- admin panels;
- workspace-интерфейсов;
- mobile/tablet shell.
```html
Product Console
Overview
```
Behavior:
```js
GNexusUIKit.NavigationShell.init();
```
`NavigationShell.init()` запускается автоматически, если подключен bundle.
## List Navigation
Используйте `.list.list-nav` внутри drawer или sidebar-like панелей.
```html
```
Active state задается классом `.list-item-active`.
## Tabs
Tabs подходят для близких представлений внутри одного контекста.
```html
```
## Dropdown, Tooltip, Popover
Эти паттерны живут в `Navigation & Overlays`.
```html
```
```js
GNexusUIKit.Overlays.init();
```
## Drawer
`Drawer` - programmatic side panel для secondary flows. Navigation Shell использует похожий визуальный паттерн, но его markup статический.
```js
const drawer = GNexusUIKit.Drawer.create("details", {
title: "Details",
bodyText: "Content",
position: "left"
});
drawer.show();
```