What is difference between v-app-bar and v-toolbar in vuetify?

Question

I just started exploring vuetify. All the vuetify componets resides in <v-app>.
I wanted to create menu for my site so in documentation I found <v-app-bar> and <v-toolbar>
I am confused that if I should keep menu items inside <v-app-bar> or <v-toolbar> as offical documentation says

About <v-app-bar> https://vuetifyjs.com/en/components/app-bars

The v-app-bar component is pivotal to any graphical user interface (GUI), as it generally is the primary source of site navigation. The app-bar component works great in conjunction with a v-navigation-drawer for providing site navigation in your application.

About <v-toolbar> https://vuetifyjs.com/en/components/toolbars

The v-toolbar component is pivotal to any gui, as it generally is the primary source of site navigation. The toolbar component works great in conjunction with v-navigation-drawer and v-card.

Both the description are almost same. What is difference in both and when we should use what? or we should use v-toolbar inside v-app-bar?

Cato Minor · Answer 1 · 2019-11-01T08:03:35.587

35

Per the Vuetify Migration Guide -- 'Migrating from v1.5.x to v2.0.x':

v-toolbar: All existing scrolling techniques and app functionality has been deprecated and moved to v-app-bar.

Thus, starting in Vuetify 2.0, v-app-bar is what you probably want to use at the top of most typical apps since you can do scrolling-related effects and designate v-app-bar as a unique 'top level' application component using the app prop.

On the other hand, v-toolbar could be used for other 'subordinate' cases where scrolling should definitely not affect the toolbar, perhaps if v-toolbar is being used as part of a in-screen widget.

edited Nov 01 '19 at 08:03

answered Oct 31 '19 at 21:38

Cato Minor

2,992
3
29
42

5

why doesn't it say "deprecated" or something of the like at the very top of the toolbar doc page? – Tobias Feil Feb 17 '20 at 11:38
1

@TobiasFeil The docs are all open source if you'd like to recommend a change: https://github.com/vuetifyjs/vuetify/tree/master/packages/docs. :) – Cato Minor Feb 17 '20 at 20:02
3

Why would anyone go through old migration documents to find something like that? It's just silly. – tazboy May 15 '20 at 02:02
terrible news for newbies :-| – Thinh NV May 29 '20 at 10:33
Doesn't look deprecated to me: https://vuetifyjs.com/en/components/toolbars/#extension-height Also, where's toolbar-items for v-app-bar? – trainoasis Nov 18 '20 at 10:42

score 17 · Answer 2 · answered Sep 23 '19 at 18:58

Actually v-app-bar extends v-toolbar to give you additional properties that you can use.

These properties give you far more granular control over the overall layout of the toolbar and how it responds to sizing and content changes in the surrounding space.

You can look at the properties of each and see how the v-app-bar has a dozen or more additional properties that you can leverage to customize the functionality and design of it, whereas the toolbar is opinionated about its purpose and limits those functionalities.

What is difference between v-app-bar and v-toolbar in vuetify?

2 Answers2

Linked