When I use v-app-bar it comes with a fixed height (thickness). How do I adjust it? I'd like to make it thinner. My bar contains navigation buttons and a switch:

<template>
  <v-app theme="dark">
    <v-app-bar>
      <v-btn to="one">One</v-btn>
      <v-btn to="two">Two</v-btn>
      <v-switch label="toggle"></v-switch>
    </v-app-bar>
  </v-app>
</template>

Vuetify Play

View source of the result shows this:

<div class="v-toolbar__content" style="height: 64px;">
<!----><!----><v-button>One</v-button><!----></div>

---

Update: I think I found a way, though now my bar content is neither aligned nor vertically centered. Is there a better option?

<template>
  <v-app theme="dark">
    <v-app-bar height="1px" class="my-height">
      <v-btn to="one">One</v-btn>
      <v-btn to="two">Two</v-btn>
      <v-switch label="toggle"></v-switch>
    </v-app-bar>
  </v-app>
</template>
<style scoped>
  .bar-areas {
    grid-template-areas: none;
  }
  .my-height {
    height: 48px;
  }
</style>

Vuetify Play

When I use v-app-bar it comes with a fixed height (thickness). How do I adjust it? I'd like to make it thinner. My bar contains navigation buttons and a switch:

<template>
  <v-app theme="dark">
    <v-app-bar>
      <v-btn to="one">One</v-btn>
      <v-btn to="two">Two</v-btn>
      <v-switch label="toggle"></v-switch>
    </v-app-bar>
  </v-app>
</template>

Vuetify Play

View source of the result shows this:

<div class="v-toolbar__content" style="height: 64px;">
<!----><!----><v-button>One</v-button><!----></div>

---

Update: I think I found a way, though now my bar content is neither aligned nor vertically centered. Is there a better option?

<template>
  <v-app theme="dark">
    <v-app-bar height="1px" class="my-height">
      <v-btn to="one">One</v-btn>
      <v-btn to="two">Two</v-btn>
      <v-switch label="toggle"></v-switch>
    </v-app-bar>
  </v-app>
</template>
<style scoped>
  .bar-areas {
    grid-template-areas: none;
  }
  .my-height {
    height: 48px;
  }
</style>

Vuetify Play

• vuetify.js

Share Improve this question Follow edited Mar 12 at 3:27 jrefior asked Mar 12 at 2:47 jrefiorjrefior 4,43122 gold badges2121 silver badges3333 bronze badges 6

• 1 Regarding <v-app-bar height="48"></v-app-bar>, please check the documentation. – yuanyxh Commented Mar 12 at 3:24
• @yuanyxh Thanks, I didn't realize a simple number (no units) would work there, but it does. None of the strings I've tried (small, xs, etc.) have worked, I'm not sure what a valid string value would be. – jrefior Commented Mar 12 at 3:34
• @yuanyxh As far as I can tell, that is the correct answer. Would you like to post it as an answer, or shall I post something? – jrefior Commented Mar 12 at 3:57
• Please feel free to post it as the answer. Thank you. – yuanyxh Commented Mar 12 at 5:03
• @jrefior Are you looking for v-tabs maybe? – fOURP Commented Mar 12 at 7:35

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 0

@yuanyxh provided the answer in a comment: add a height attribute with the desired pixel height, no units. For example:

<template>
  <v-app theme="dark">
    <v-app-bar height="48">
      <v-btn to="one">One</v-btn>
      <v-btn to="two">Two</v-btn>
      <v-switch label="toggle"></v-switch>
    </v-app-bar>
  </v-app>
</template>

Vuetify Play

The API shows a string type can alternatively be used, but I have not found any string value (besides a plain number) that isn't interpreted as zero. Using units, such as "48px", is also interpreted as zero.