<template> <DocSectionText v-bind="$attrs"> <p>Menubar requires a collection of menuitems as its <i>model</i>.</p> </DocSectionText> <div class="card"> <Menubar :model="items" /> </div> <DocSectionCode :code="code" /> </template> <script> export default { data() { return { items: [ { label: 'Home', icon: 'pi pi-home' }, { label: 'Features', icon: 'pi pi-star' }, { label: 'Projects', icon: 'pi pi-search', items: [ { label: 'Components', icon: 'pi pi-bolt' }, { label: 'Blocks', icon: 'pi pi-server' }, { label: 'UI Kit', icon: 'pi pi-pencil' }, { label: 'Templates', icon: 'pi pi-palette', items: [ { label: 'Apollo', icon: 'pi pi-palette' }, { label: 'Ultima', icon: 'pi pi-palette' } ] } ] }, { label: 'Contact', icon: 'pi pi-envelope' } ], code: { basic: ` <Menubar :model="items" /> `, options: ` <template> <div class="card"> <Menubar :model="items" /> </div> </template> <script> export default { data() { return { items: [ { label: 'Home', icon: 'pi pi-home' }, { label: 'Features', icon: 'pi pi-star' }, { label: 'Projects', icon: 'pi pi-search', items: [ { label: 'Components', icon: 'pi pi-bolt' }, { label: 'Blocks', icon: 'pi pi-server' }, { label: 'UI Kit', icon: 'pi pi-pencil' }, { label: 'Templates', icon: 'pi pi-palette', items: [ { label: 'Apollo', icon: 'pi pi-palette' }, { label: 'Ultima', icon: 'pi pi-palette' } ] } ] }, { label: 'Contact', icon: 'pi pi-envelope' } ] }; } }; <\/script> `, composition: ` <template> <div class="card"> <Menubar :model="items" /> </div> </template> <script setup> import { ref } from "vue"; const items = ref([ { label: 'Home', icon: 'pi pi-home' }, { label: 'Features', icon: 'pi pi-star' }, { label: 'Projects', icon: 'pi pi-search', items: [ { label: 'Components', icon: 'pi pi-bolt' }, { label: 'Blocks', icon: 'pi pi-server' }, { label: 'UI Kit', icon: 'pi pi-pencil' }, { label: 'Templates', icon: 'pi pi-palette', items: [ { label: 'Apollo', icon: 'pi pi-palette' }, { label: 'Ultima', icon: 'pi pi-palette' } ] } ] }, { label: 'Contact', icon: 'pi pi-envelope' } ]); <\/script> ` } }; } }; </script>