Aside Header

headerDecoration
multipleTooltip
subheaderItemsVisible

AsideHeader is provided a flexible and customizable navigation experience within your application. Users can easily customize the appearance of the sidebar to match their branding colors also to add personalized links, icons that cater specifically to their application's functionality.

The component offers a robust solution for creating intuitive and visually appealing navigation systems, enhancing user experience while providing the flexibility to adapt to various use cases.

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

State

The component has two possible states: collapsed, expanded. Уou can manage between states using compact, onChangeCompact props and also hide button with hideCollapseButton.

Top decoration

Navigation highlights top section with Logo and Subheader items using headerDecoration props.

Custom background

The component supports specific themization cases, e.g. image on background or splitting sections by color — using customBackground, customBackgroundClassName props.

Sections

Navigation includes 3 parts: the top, the middle and the bottom. These sections are similar with a few variations of possibilities based on frequency user cases. Important note: A user manages the state of the elements.

The Top

The section usually contains general elements for all site pages and includes the logo and the elements below it. Clickable logo can be useful for a quick navigation to the home page, if necessary the element (e.g. search, catalogue) is placed under it.

The elements have access to tooltip, popup, drawers, it is enough to select the desired behavior when configuring this section.

The Middle (menuItems)

The main section usually depends on context of the page — one of examples using navigation on the multipage sites. The elements will collapse into three dots if there is no vertical space by default.

Navigation elements can be in one of two states: collapsed (isCollapsed), where only the icon is visible, and expanded. There is some space for customization of the entire item through a wrapper.

With additional configuration via AllPages users can further customize menu to their preference by hiding unnecessary items. This brings in a new state for items - pinned/hidden. If item is pinned, it will always be displayed in the section.

The onMenuItemsChanged callback is required for adding extra component All Pages which displays panel for editing the list of visible menu items.

Important note: A user manages a modified list of the menu items that they receive from the callback and provides the new state of items to AsideHeader.

The Bottom

The Footer improves user experience by offering easy access to the elements and supplementary resources. It gives opportunity to connect with support add custom information to be sure that user will not get lost.

There can be both their own components inside, or also you can use FooterItem.

Highlighting element

Highlighting an element over modal windows can be useful when a user wants to report an error via a feedback form, and the form with bug is opened in a modal window.

In the FooterItem component, you can pass a bringForward prop, which renders the icon above modal windows. Additionally, you need to pass a function to AsideHeader that will notify about the opening of modal windows.

Rendering Content

Right part near to AsideHeader is place for main page content. When expanding and collapsing navigation, navigation size will be changed. This knowledge may be helpful, e.g. recalculating layout in some components. CSS-variable --gn-aside-header-size contains actual navigation size.

See below about alternative path of rendering content.

Rendering 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.

Properties

NameDescriptionTypeDefault
classNameHTML class attribute of the Logostring
collapseTitleCollapseButton title for collapsing navigationstring"Свернуть" "Collapse"
compactNavigation visual statebooleanfalse
customBackgroundAsideHeader backgroundReact.ReactNode
customBackgroundClassNameOverride default background container's stylesstring
expandTitleCollapseButton title for expanding navigationstring"Развернуть" "Expand"
headerDecorationColor background of the top section with logo and subheader itemsbooleanfalse
hideCollapseButtonHiding CollapseButton. Use compact prop for setting default navigation statebooleanfalse
logoLogo container includes icon, title, handling clicksLogo
menuItemsItems in the navigation middle sectionArray<MenuItem>[]
menuMoreTitleAdditional element title of menuItems if elements don't fitstring"Ещё" "More"
multipleTooltipShow the multiple tooltip by hovering elements of menuItems in collapsed statebooleanfalse
onChangeCompactCallback will be called when changing navigation visual state(compact: boolean) => void;
onClosePanelCallback will be called when closing panel. You can add panels via PanelItems prop() => void;
onMenuItemsChangedCallback will be called when updating list of the menuItems in AllPagesPanel(items: Array<MenuItem>) => void
onMenuMoreClickCallback will be called when some items don't fit and "more" button is clicked() => void;
onAllPagesClickCallback will be called when "All pages" button is clicked() => void;
openModalSubscriberFunction notifies AsideHeader about Modals visibility changes( (open: boolean) => void) => void
panelItemsItems for Drawer component. Used for show additional information over main contentArray<DrawerItem>[]
renderContentFunction rendering the main content at the right of the AsideHeader(data: {size: number}) => React.ReactNode
renderFooterFunction rendering the navigation bottom section(data: {size: number}) => React.ReactNode
refref to target popup anchorReact.ForwardedRef<HTMLDivElement, AsideHeaderProps>
subheaderItemsItems in the navigation top section under LogoArray<{item: MenuItem; enableTooltip?: boolean; bringForward?: boolean}>[]
topAlertThe container above the navigation based on the uikit Alert componentTopAlert
qaThe value to be passed to data-qa attribute of the AsideHeader containerstring
NameDescriptionTypeDefault
afterMoreButtonThe menu item will be placed in the end, even item don't fitboolean
categoryThe category to which the menu item belongs. Need for grouping in the display/editing mode of all pagesstring"Остальное" "All other"
currentThe current/selected itembooleanfalse
hiddenVisibility item in the menubooleanfalse
iconMenu icon based on the uikit Icon componentIconProps['data']
iconSizeMenu icon sizenumber string18
iconQaThe value to be passed to data-qa attribute of the Icon containerstring
idThe menu item idstring
itemWrapperThe menu item wrapperItemWrapper
linkHTML href attributestring
onItemClickCallback will be called when clicking on the item(item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
onItemClickCaptureCallback will be called when clicking on the item (event: React.SyntheticEvent) => void
orderDetermine the display order in the navigationnumber
pinnedThe parameter restricts hiding menu item in the AllPagesPanelbooleanfalse
rightAdornmentCustomize right side of the menu itemReact.ReactNode
titleThe menu item titleReact.ReactNode
tooltipTextTooltip contentReact.ReactNode
typeThe menu item type changes appearance: "regular", "action", "divider"string"regular"
qaThe value to be passed to data-qa attributestring

TopAlert

Top Alert can be useful for displaying important information that users need to know. This alert is often appeared in all pages like call to action or warning.

You can customize the inner content, make alert closeable if necessary. For reading top alert height see value from CSS variable --gn-top-alert-height.

NameDescriptionTypeDefault
actionsArray of buttons or full custom componentsAlertActions
centeredCentering all contentbooleanfalse
alignDetermines how content inside the Alert component is vertically alignedAlertAlign"baseline"
closableShow close button and make possible to pass onCloseTopAlert propbooleanfalse
denseAdd top, bottom paddings to TopAlert containerbooleanfalse
iconOverride default iconAlertIcon
messageMessage of the alertAlertMessage
onCloseTopAlertCallback will be called when clicking on the close button() => void
titleTitle of the alertAlertTitle
themeAlert appearanceAlertTheme"warning"
viewEnable/disable background color of the alertAlertView"filled"

CSS API

NameDescription
--gn-aside-header-decoration-collapsed-background-colorDecoration color for collapsed navigation
--gn-aside-header-decoration-expanded-background-colorDecoration color for expanded navigation
--gn-aside-header-background-colorNavigation background color
--gn-aside-header-collapsed-background-colorCollapsed navigation background color
--gn-aside-header-expanded-background-colorExpanded navigation background color
--gn-aside-header-divider-horizontal-colorAll horizontal divider line color
--gn-aside-header-divider-vertical-colorVertical divider line color between AsideHeader and content
--gn-top-alert-heightRead only.AsideHeader top alert height
--gn-aside-header-padding-topNavigation top padding. May be helpful when logo and subheader items hide
Item
--gn-aside-header-general-item-icon-colorIcon color for Subheader and Footer items
--gn-aside-header-item-icon-colorIcon color for CompositeBar items
--gn-aside-header-item-text-colorText item color
--gn-aside-header-item-background-color-hoverText color on hover
Current Item
--gn-aside-header-item-current-background-colorCurrent item's background color
--gn-aside-header-item-current-icon-colorCurrent item's icon color
--gn-aside-header-item-current-text-colorCurrent item's text color
--gn-aside-header-item-current-background-color-hoverCurrent item's icon color on hover
--gn-aside-header-item-collapsed-radiusItem border radius for collapsed navigation
--gn-aside-header-item-expanded-radiusItem border radius for expanded navigation
z-indexes
--gn-aside-header-z-indexAside header z-index
--gn-aside-header-panel-z-indexAside header panel (Drawer component) z-index
--gn-aside-header-pane-top-z-indexTop pane z-index
--gn-aside-header-content-z-indexContent (right part) z-index