App Bar
9.1.8
The App Bar provides content and actions related to the current screen. It’s used for navigation, screen titles and actions.
| Namn | Typ | Beskrivning |
|---|---|---|
actionButtons | unknown | Action buttons located on the right side of the AppBar. |
ariaLabel | string | Aria-label for the AppBar's <nav> element. It helps screen reader users
understand the purpose of this navigation section, especially when multiple <nav> elements are present on a page. |
color | "black" |
"white" | Configure the title and icons to appear in either white or black. |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
customRightContent | ReactElement | Custom content on the right side of the AppBar. |
dense | boolean | Make App Bar height 56 instead of 72. Dense is true by default on breakpoints below sm. |
elevation | "undefined" |
"1" |
"2" | Elevation of the AppBar. Used primarily in dark mode to handle modals and layers |
headingRef | RefObject | Assign a reference to the heading to use it as the scroll target for determining when to display the title within the appbar. |
hideOnScrollDown | boolean | Hide App Bar when scrolling down. |
isOnImage | boolean | Display the AppBar with a gradient overlay and white text to ensure good contrast. |
navigationButtons | NavigationButtonProps | Navigation buttons. |
scrimHeight | number | Height of the overlay scrim in pixels. Default is 125px. |
scrollTarget | HTMLElement | Specify an element to serve as the scroll target. Expects a DOM node. |
sx | SxProps | The system prop that allows defining system overrides as well as additional CSS styles. |
title * | string | Title for elevated AppBar. |
toolBarSx | SxProps | The system prop that allows defining system overrides as well as additional CSS styles for toolbar. |
npm install @sj-ab/component-library.ui.app-barNavigation Button
None
Back
Back + Cancel (only for modals)
Back + Close (only for modals)
Cancel (only for modals)
Close (only for modals)
Minimize (only for modals)
Menu (only for tablet & desktop)
Menu + Back (only for tablet & desktop)
Elevation
Resting App Bar (default)
Elevated (when content scrolls behind it)
Elevated Prominent (when content scrolls behind it)
Navigation Drawer, Option 1
When the user taps the Menu button in the App Bar, a modal Navigation Drawer is pushed from the leading edge. The user can collapse the menu by tapping the Close button, drag the menu to the left or tap anywhere outside the menu.
Navigation Drawer, Option 2
When the user taps the Menu button in the App Bar, an inline Navigation Drawer is pushed from the leading edge. The user can collapse the menu by tapping the Close button or drag the menu to the left. Use this option only if the content area is large enough.
Navigation Drawer, Option 3
An inline Navigation Drawer is displayed from the start. The user can collapse the menu by tapping the Close button or drag the menu to the left. Use this option only if the content area is large enough.
Tips!
Om Error Summary Card används tillsammans med en sida som har en App Bar så kan det hända att inputfält som omnämns i Error Summary Card göms bakom App Bar när användaren klickar på en av länkarna som leder ner till inputfältet.
Detta löser du genom att lägga till CSS-egenskapen scroll-padding (eller scrollPadding om du sätter den via JavaScript/TypeScript) på närmaste, skrollande container. En scroll-padding om 9 spacing-enheter kan vara lagom.
Semantik
AppBarens behållare renderas som ett navigationselement (<nav>). Detta eftersom att AppBar allra oftast kommer att innehålla någon typ av navigation, t.ex. en tillbakaknapp eller en stängknapp.
Rubriken i AppBar är dold för skärmläsare med aria-hidden eftersom det alltid kommer att finnas en annan likadan rubrik på sidan och vi vill bibehålla en korrekt rubrikstruktur.
Textförstoring och responsivitet
AppBar är byggd för att vara robust och klara olika grader av förstoring på skärmar av varierande storlek.
När det finns plats kommer knapparna i AppBar renderas som TextButton med både ikon och text. Men på små skärmar så visas de istället som IconButton för att spara utrymme.
Rubriken i AppBar kortas ner med ellipsis när det saknas plats, så att rubriken inte går över på två rader. Detta är ett medvetet avsteg från WCAG-kravet 1.4.4 Resize text (AA), motiverat med att samma rubrik alltid kommer finnas på sidan utanför AppBar och där kan förstoras.