# Header Examples (vue)

```vue
<template>
  <h1>DBHeader Documentation Examples</h1>
  <h2>1. Default Header</h2>
  <DBHeader :drawerOpen="drawerOpen" :onToggle="(open) => (drawerOpen = open)">
    <template v-slot:brand><DBBrand>My Awesome App</DBBrand></template>
<template v-slot:metaNavigation><DBLink href="#">Imprint</DBLink><DBLink href="#">Help</DBLink></template>
<template v-slot:primaryAction><DBButton icon="magnifying_glass" variant="ghost" noText>Search</DBButton></template>
<template v-slot:secondaryAction><DBButton icon="x_placeholder" variant="ghost" noText>Profile</DBButton><DBButton icon="alert" variant="ghost" noText>Notification</DBButton><DBButton icon="help" variant="ghost" noText>Help</DBButton></template>

    <DBNavigation
      ><DBNavigationItem><a href="#">Navi-Item 1</a></DBNavigationItem
      ><DBNavigationItem icon="x_placeholder"
        ><a href="#">Navi-Item 2</a></DBNavigationItem
      ><DBNavigationItem :disabled="true"
        ><a href="#">Navi-Item 3</a></DBNavigationItem
      ></DBNavigation
    ></DBHeader
  >
</template>

<script setup lang="ts">
import { ref } from "vue";

import { DBNavigation } from "@db-ux/v-v-core-components";
import { DBNavigationItem } from "@db-ux/v-v-core-components";
import { DBHeader } from "@db-ux/v-v-core-components";

const drawerOpen = ref<boolean>(false);
</script>
```