Aside Header Navigation · Preview →
npm install @gravity-ui/navigationEnsure that peer dependencies are installed in your project
npm install --dev @gravity-ui/uikit@^3.0.2 @bem-react/[email protected] react@^16.0.0- AsideHeader
- MobileHeader
- FooterItem
- MobileHeaderFooterItem
- Drawer
- DrawerItem
- PageLayout
- PageLayoutAside
If your app content needs to be rendered faster than by passing it throw AsideHeader props,
you may need to switch usage of AsideHeader to advanced style with PageLayout like this:
-import {AsideHeader} from '@gravity-ui/navigation';
+import {PageLayout} from '@gravity-ui/navigation';
+
+const PageLayoutAside = React.lazy(() =>
+ import('@gravity-ui/navigation').then((module) => ({default: module.PageLayoutAside})),
+);
- <AsideHeader renderContent={renderContent} {...restProps} />
+ <PageLayout reverse>
+ <PageLayout.Content>
+ <ContentExample />
+ </PageLayout.Content>
+
+ <Suspense fallback={null}>
+ <PageLayoutAside {...restProps} />
+ </Suspense>
+ </PageLayout>import {AsideHeader} from '@gravity-ui/navigation';Used for themization Navigation's components
| Name | Description | Default |
|---|---|---|
--gn-aside-header-background-color |
Сolor of decorations and selected items | --g-color-base-warning-light |
--gn-aside-header-subheader-divider-line-color |
Divider line color for withDecoration and expanded AsideHeader |
Light theme: --g-color-line-generic, Dark theme: --g-color-line-generic-solid |
--gn-aside-header-collapse-button-divider-line-color |
--gn-aside-header-subheader-divider-line-color |
|
--gn-aside-header-footer-item-icon-color |
--g-color-text-primary |
|
--gn-aside-header-subheader-item-icon-color |
--g-color-text-primary |
|
--gn-aside-header-item-icon-background-size |
Background size used when AsideHeader is compact |
38px |
--gn-aside-header-divider-line-color |
Vertical color divider between AsideHeader and content |
Light theme: transparent, Dark theme: --g-color-line-generic-solid |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent