@gravity-ui/navigation v2.9.1
@gravity-ui/navigation ·
Aside Header Navigation · Preview →
Install
npm install @gravity-ui/navigation
Ensure that peer dependencies are installed in your project
npm install --dev @gravity-ui/uikit@^3.0.2 @bem-react/classname@1.6.0 react@^16.0.0
Components
- AsideHeader
- MobileHeader
- FooterItem
- MobileHeaderFooterItem
- Drawer
- DrawerItem
- PageLayout
- PageLayoutAside
- AsideFallback
- Logo
- MobileLogo
- Footer
- MobileFooter
Optimization
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:
--- Main.tsx
+++ Main.tsx
-import {AsideHeader} from './AsideHeader'
+import {PageLayout, AsideFallback} from '@gravity-ui/navigation';
+const Aside = React.lazy(() =>
+ import('./Aside').then(({Aside}) => ({ default: Aside }))
+);
- <AsideHeader renderContent={renderContent} {...restProps} />
+ <PageLayout>
+ <Suspense fallback={<AsideFallback />}>
+ <Aside />
+ </Suspense>
+
+ <PageLayout.Content>
+ <ContentExample />
+ </PageLayout.Content>
+ </PageLayout>
--- Aside.tsx
+++ Aside.tsx
-import {AsideHeader} from '@gravity-ui/navigation';
+import {PageLayoutAside} from '@gravity-ui/navigation';
export const Aside: FC = () => {
return (
- <AsideHeader {...props}>
+ <PageLayoutAside {...props}/>
);
};
Imports
import {AsideHeader} from '@gravity-ui/navigation';
CSS variables
Used for themization Navigation's components
AsideHeader vars
Name | Description | Default |
---|---|---|
--gn-aside-header-decoration-collapsed-background-color | Decoration color for collapsed navigation | --g-color-base-warning-light |
--gn-aside-header-decoration-expanded-background-color | Decoration color for expanded navigation | --g-color-base-warning-light |
--gn-aside-header-background-color | Navigation background color | --g-color-base-background |
--gn-aside-header-divider-horizontal-color | All horizontal divider line color | --g-color-line-generic |
--gn-aside-header-divider-vertical-color | Vertical divider line color between AsideHeader and content | --g-color-line-generic |
--gn-aside-top-panel-height | Read only.AsideHeader top alert height | 0px |
Item | ||
--gn-aside-header-general-item-icon-color | Icon color for Subheader and Footer items | --g-color-text-primary |
--gn-aside-header-item-icon-color | Icon color for CompositeBar items | --g-color-text-misc |
--gn-aside-header-item-text-color | --g-color-text-primary | |
--gn-aside-header-item-background-color-hover | --g-color-base-simple-hover | |
Current Item | ||
--gn-aside-header-item-current-background-color | --g-color-base-selection | |
--gn-aside-header-item-current-icon-color | ||
--gn-aside-header-item-current-text-color | --g-color-text-primary | |
--gn-aside-header-item-current-background-color-hover |
5 days ago
14 days ago
17 days ago
21 days ago
22 days ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
7 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
8 months ago
10 months ago
9 months ago
9 months ago
9 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
10 months ago
7 months ago
7 months ago
7 months ago
5 months ago
6 months ago
7 months ago
6 months ago
7 months ago
8 months ago
10 months ago
9 months ago
9 months ago
9 months ago
8 months ago
10 months ago
7 months ago
7 months ago
7 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago