App bar
#

The app bar component is a part of a websiteโ€™s navigation and itโ€™s an alternative to the header element in apps.

Examples
#

Basic usage
#

By default, a va-app-bar needs a parent element with relative position.

Open in GitHub

Color
#

You can set a background color and gradient of the component with color and gradient props.

Open in GitHub

Fixed
#

You can make app bar position fixed via fixed prop.

Open in GitHub

Hide
#

hide-on-scroll allows you to hide app bar when you scroll away. You need to define target.

.
Open in GitHub

Shadow
#

You can set a shadow with shadow-on-scroll prop. You need to define target.

.
Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
bottom

Sets the component position to the bottom (fixed state).

Boolean

false

color

Color of the component (theme string or HEX string).

String

-

fixed

Switches component position to fixed.

Boolean

false

gradient

Applies gradient style to background.

Boolean

false

hide-on-scroll

Hides component when scrolling.

Boolean

false

preset

Named preset combination of component props.

String

-

shadow-color

Sets color to the box-shadow.

String

""

shadow-on-scroll

Applies box-shadow to the component when scrolling target.

Boolean

false

target

Target for scrolling.

Object | String

""

Slots #

NameDescription

default

Slot for app-bar content

Css Variables #

NameDefault Value
--va-app-bar-position relative
--va-app-bar-height auto
--va-app-bar-shadow 0 0 12px 2px
--va-app-bar-z-index calc(var(--va-z-index-teleport-overlay) - 100)
--va-app-bar-transition transform 0.5s ease