Skip to content

gravity-ui/navigation

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

be2c7d9 · Oct 5, 2023
Jul 26, 2023
Sep 23, 2022
Oct 1, 2023
Oct 31, 2022
Jan 10, 2023
Oct 5, 2023
Aug 18, 2023
Jul 26, 2023
Sep 23, 2022
Sep 23, 2022
Sep 29, 2023
Sep 23, 2022
Sep 23, 2022
Jul 26, 2023
Sep 23, 2022
Sep 23, 2022
Sep 23, 2022
Oct 4, 2023
Sep 23, 2022
Sep 23, 2022
Sep 23, 2022
Sep 8, 2023
Sep 23, 2022
Sep 23, 2022
Oct 4, 2023
Oct 4, 2023
Oct 11, 2022
Dec 29, 2022
Aug 23, 2023
Sep 23, 2022

Repository files navigation

@gravity-ui/navigation · npm package CI storybook

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

Imports

import {AsideHeader} from '@gravity-ui/navigation';

CSS variables

Used for themization Navigation's components

AsideHeader vars

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 --g-color-base-warning-light
--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