Interface AppBarContentProps

interface AppBarContentProps {
    actionButtons?: [ActionButtonProps?, ActionButtonProps?, ActionButtonProps?];
    appBarRef: RefObject<null | HTMLElement>;
    ariaLabel?: string;
    color?: "black" | "white";
    customAttribute?: {
        attribute: string;
        value: string | number;
    };
    customRightContent?: ReactElement<any, string | JSXElementConstructor<any>>;
    dense?: boolean;
    elevated?: boolean;
    elevation?: 0 | 1 | 2;
    headingRefBottom?: number;
    hideOnScrollDown?: boolean;
    isOnImage?: boolean;
    isScrolling?: boolean;
    navigationButtons?: NavigationButtonProps;
    prominent?: boolean;
    scrimHeight?: number;
    scrollTarget?: HTMLElement;
    showBackground?: boolean;
    showBorder?: boolean;
    showTitle?: boolean;
    sx?: SxProps<Theme>;
    title: string;
    toolBarSx?: SxProps<Theme>;
    window?: (() => Window | HTMLElement);
}

Hierarchy

  • Omit<AppBarProps, "position" | "headingRef">
    • AppBarContentProps

Properties

actionButtons? appBarRef ariaLabel? color? customAttribute? customRightContent? dense? elevated? elevation? headingRefBottom? hideOnScrollDown? isOnImage? isScrolling? navigationButtons? prominent? scrimHeight? scrollTarget? showBackground? showBorder? showTitle? sx? title toolBarSx? window?

Properties

OptionalactionButtons

actionButtons?: [ActionButtonProps?, ActionButtonProps?, ActionButtonProps?]

Action buttons located on the right side of the AppBar.

appBarRef

appBarRef: RefObject<null | HTMLElement>

OptionalariaLabel

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.

Optionalcolor

color?: "black" | "white"

Configure the title and icons to appear in either white or black.

OptionalcustomAttribute

customAttribute?: {
    attribute: string;
    value: string | number;
}

Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

OptionalcustomRightContent

customRightContent?: ReactElement<any, string | JSXElementConstructor<any>>

Custom content on the right side of the AppBar.

Optionaldense

dense?: boolean

Make App Bar height 56 instead of 72. Dense is true by default on breakpoints below sm.

Optionalelevated

elevated?: boolean

Show AppBar in elevated state.

Optionalelevation

elevation?: 0 | 1 | 2

Elevation of the AppBar. Used primarily in dark mode to handle modals and layers

OptionalheadingRefBottom

headingRefBottom?: number

Distance from the top of the App Bar parent to end of heading.

OptionalhideOnScrollDown

hideOnScrollDown?: boolean

Hide App Bar when scrolling down.

OptionalisOnImage

isOnImage?: boolean

Display the AppBar with a gradient overlay and white text to ensure good contrast.

OptionalisScrolling

isScrolling?: boolean

Indicates whether the component is currently in a scrolling state.

OptionalnavigationButtons

navigationButtons?: NavigationButtonProps

Navigation buttons.

Optionalprominent

prominent?: boolean

Prominent AppBar background that requires elevated state. Default is false on mobile and true on desktop.

OptionalscrimHeight

scrimHeight?: number

Height of the overlay scrim in pixels. Default is 125px.

OptionalscrollTarget

scrollTarget?: HTMLElement

Specify an element to serve as the scroll target. Expects a DOM node.

OptionalshowBackground

showBackground?: boolean

Show AppBar background.

OptionalshowBorder

showBorder?: boolean

Show AppBar bottom border.

OptionalshowTitle

showTitle?: boolean

Show title inside AppBar.

Optionalsx

sx?: SxProps<Theme>

The system prop that allows defining system overrides as well as additional CSS styles.

title

title: string

Title for elevated AppBar.

OptionaltoolBarSx

toolBarSx?: SxProps<Theme>

The system prop that allows defining system overrides as well as additional CSS styles for toolbar.

Optionalwindow

window?: (() => Window | HTMLElement)

Function that return the scroll target, which can be either an HTML element or the global Window object.

Settings

Member Visibility

On This Page

Properties