Halstack
Design system
v7.0.0
OverviewIntroduction
ComponentsAccordionAlertApplication layoutBleedBoxBulleted ListButtonCardCheckboxChipDate InputDialogDropdownFile InputFlexFooterHeaderHeadingInsetLinkNav TabsNumber InputPaginatorParagraphPassword InputProgress BarQuick NavRadio GroupResultset TableSelectSidenavSliderSpinnerSwitchTableTabsTagText InputTextareaToggle GroupTypographyWizard
Application layout
Ready
The application layout provides a base UI wrapper for any application built with Halstack.
| Name | Default | Description |
|---|---|---|
| visibilityToggleLabel: string | Text to be placed next to the hamburger button that toggles the visibility of the sidenav. | |
| header: node | Header of the application layout shown at the top of the screen. It is optional and if it is not specified, the default header will be shown. Please check the Header documentation here. | |
| footer: node | Footer of the application layout shown at the bottom of the screen. It is optional and if it is not specified, the default header will be shown. Please check the Footer documentation here. | |
| sidenav: node | Sidenav of the application layout shown at the left side of the screen. Please check the Sidenav documentation here. | |
| children: node | Use the DxcApplicationLayout.Main provided to render main content. |
Custom hook that returns a function to manually change the visibility of the sidenav in responsive mode. This can be very useful for cases where a custom sidenav is being used and some of its inner elements can close it (for example, a navigation link).