New to Kendo UI for Vue? Start a free 30-day trial
Customizing Bottom-navigation
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-bottom-nav-padding-x | map.get( $kendo-spacing, 1.5 ) | ||
Description
The horizontal padding of the BottomNavigation. | |||
| $kendo-bottom-nav-padding-y | $kendo-bottom-nav-padding-x | ||
Description
The vertical padding of the BottomNavigation. | |||
| $kendo-bottom-nav-gap | $kendo-bottom-nav-padding-x | ||
Description
The spacing between the BottomNavigation items. | |||
| $kendo-bottom-nav-border-width | 1px 0px 0px 0px | ||
Description
The width of the border around the BottomNavigation. | |||
| $kendo-bottom-nav-font-family | var( --kendo-font-family, inherit) | ||
Description
The font family of the BottomNavigation. | |||
| $kendo-bottom-nav-font-size | var( --kendo-font-size-md, 1rem ) | ||
Description
The font size of the BottomNavigation. | |||
| $kendo-bottom-nav-line-height | var( --kendo-line-height-md, normal ) | ||
Description
The line height of the BottomNavigation. | |||
| $kendo-bottom-nav-letter-spacing | .2px | ||
Description
The letter spacing of the BottomNavigation. | |||
| $kendo-bottom-nav-item-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the BottomNavigation item. | |||
| $kendo-bottom-nav-item-padding-y | map.get( $kendo-spacing, 0.5 ) | ||
Description
The vertical padding of the BottomNavigation item. | |||
| $kendo-bottom-nav-item-min-width | 72px | ||
Description
The minimum width of the BottomNavigation item. | |||
| $kendo-bottom-nav-item-max-width | none | ||
Description
The maximum width of the BottomNavigation item. | |||
| $kendo-bottom-nav-item-min-height | calc( var( --kendo-icon-size, 1.5rem ) * 2 + (#{$kendo-bottom-nav-item-padding-y} * 2) ) | ||
Description
The minimum height of the BottomNavigation item. | |||
| $kendo-bottom-nav-item-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
The border radius of the BottomNavigation item. | |||
| $kendo-bottom-nav-item-gap | map.get( $kendo-spacing, 1 ) | ||
Description
The spacing of the BottomNavigation item. | |||
| $kendo-bottom-nav-item-focus-offset | map.get( $kendo-spacing, 0.5 ) | ||
Description
The offset of the focused BottomNavigation item. | |||
| $kendo-bottom-nav-item-focus-outline-width | 1px | ||
Description
The outline width of the focused BottomNavigation item. | |||
| $kendo-bottom-nav-item-focus-outline-style | solid | ||
Description
The outline style of the focused BottomNavigation item. | |||
| $kendo-bottom-nav-shadow | var( --kendo-box-shadow-depth-4, none ) | ||
Description
The box shadow of the BottomNavigation. | |||
| $kendo-bottom-nav-brand-colors | (
primary: primary,
error: error,
success: success,
info: info,
secondary: if($kendo-enable-color-system, secondary, neutral),
tertiary: tertiary,
) | ||
Description
The theme variations for the BottomNavigation. | |||
| $kendo-bottom-nav-theme-colors | () | ||
Description
The theme colors map for the BottomNavigation variations. | |||
