AppBar

The AppBar component is commonly used to accommodate menu icons, search bars, or images.

You can use the default slot of the AppBar to incorporate rows, columns, icons, or other assorted components, as illustrated below.

info

For more details about Vuetify’s usage of AppBar component, click AppBar page.
For more prop explanations, click Vuetify AppBar API page.

Props

Attribute	Description	Type	Default
absolute	Helps being sized to function as an application layout.	boolean	false
app	Allows the selection of date range.	boolean	false
class	Allows custom properties to take effect.	string	undefined
clippedLeft	Designates that the application’s NavigationDrawer that is positioned on the left is below the app-bar.	boolean	false
clippedRight	Designates that the application’s NavigationDrawer that is positioned on the right is below the app-bar.	boolean	false
collapse	Controls the state of toolbar that the user interacts with.	boolean	false
dark	Applies dark theme.	boolean	false
extended	Extends the size of the toolbar.	boolean	false
fadeImgOnScroll	The background image of a AppBar can fade on scroll.	boolean	false
fixed	Applies position:fixed.	boolean	true
prominent	Displays a larger vertically centered icon to draw more attention.	boolean	false
src	Image source. See img for details.	string	undefined
visible	Visibility of AppBar component.	boolean	true
tabindex	Determines the order of switching from one component to another with the tab key.	string	undefined

You need to place your components within the slot of the AppBar component. This ensures proper rendering and functionality on mobile devices.

On mobile, the AppBar component serves as the top menu similar to the nav tag in HTML for web usage.

When the app prop is set to true, the AppBar component can be sized to function as an application layout. This automatically applies the CSS position:fixed property to the component, ensuring it remains fixed at the top of the viewport as the user scrolls through the application.

AppBar can get collapsed view with collapse prop. Like on the example below, menu icon can be used for collapsed app-bar view.

In case of using extension slot, app-bar with tabs functionality can be used.

Add a child named default of type slot in the Children section. After adding the Children, you should use the Row-Col structure inside it.
The AppBar component must be within a VContainer, and you should assign a value of 0 to the padding areas of the VContainer.