AppBar

AppBars are navigational UI elements providing easy access to various functions, menus, or tools within an application.

Sass Variables

The Telerik and Kendo UI AppBar enables you to configure and customize its appearance through the available Sass variables.

VariableDefault ValueComputed ValueValue
kendo-appbar-margin-xnullnullDefault: nullComputed: null
Description: The horizontal margin of the AppBar.
kendo-appbar-margin-ynullnullDefault: nullComputed: null
Description: The vertical margin of the AppBar.
kendo-appbar-padding-xk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the AppBar.
kendo-appbar-padding-yk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the AppBar.
kendo-appbar-border-width0px0pxDefault: 0pxComputed: 0px
Description: The width of the border around the AppBar.
kendo-appbar-zindex10001000Default: 1000Computed: 1000
Description: The z-index of the AppBar.
kendo-appbar-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the AppBar.
kendo-appbar-font-sizevar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit)
Description: The font size of the AppBar.
kendo-appbar-line-heightvar( --kendo-line-height, normal )var(--kendo-line-height, normal)Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal)
Description: The line height of the AppBar.
kendo-appbar-gapk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The spacing between the AppBar sections.
kendo-appbar-light-bg$kendo-color-lightvar(--kendo-color-light, #ebebeb)Default: $kendo-color-lightComputed: var(--kendo-color-light, #ebebeb)
Description: The background color of the AppBar based on light theme color.
kendo-appbar-light-textif($kendo-enable-color-system, k-color( on-light ), k-contrast-legacy( $kendo-color-light ))var(--kendo-color-on-light, #000000)Default: if($kendo-enable-color-system, k-color( on-light ), k-contrast-legacy( $kendo-color-light ))Computed: var(--kendo-color-on-light, #000000)
Description: The text color of the AppBar based on light theme color.
kendo-appbar-dark-bg$kendo-color-darkvar(--kendo-color-dark, #3d3d3d)Default: $kendo-color-darkComputed: var(--kendo-color-dark, #3d3d3d)
Description: The background color of the AppBar based on dark theme color.
kendo-appbar-dark-textif($kendo-enable-color-system, k-color( on-dark ), k-contrast-legacy( $kendo-color-dark ))var(--kendo-color-on-dark, #ffffff)Default: if($kendo-enable-color-system, k-color( on-dark ), k-contrast-legacy( $kendo-color-dark ))Computed: var(--kendo-color-on-dark, #ffffff)
Description: The text color of the AppBar based on dark theme color.
kendo-appbar-box-shadowk-elevation(4)var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))Default: k-elevation(4)Computed: var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))
Description: The box shadow of the AppBar.
kendo-appbar-bottom-box-shadow$kendo-appbar-box-shadowvar(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))Default: $kendo-appbar-box-shadowComputed: var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))
Description: The box shadow of the AppBar with bottom position.
Feedback