> For the complete documentation index, see [llms.txt](https://adrijan9.gitbook.io/vue-layout-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://adrijan9.gitbook.io/vue-layout-components/components/usage.md).

# Icon style sidebar (default)

## Demo: Icon style sidebar

You can see a demo here [CodesandBox](https://codesandbox.io/s/vue-layout-components-icon-style-06k2k).

## Usage

If you want to use icon style sidebar just write the code below: 

![Icon style sidebar closed](https://1609241390-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEtMFUsBWR6kgYgZLuB%2F-MExE3EZmCrPEm1bwlhq%2F-MExETU6UCD1aAnXPUnW%2Ficon_style_sidebar_closed.png?alt=media\&token=cd67aa3a-227b-4d5b-a4ba-809c892b50e3)

![Icon style sidebar opened](https://1609241390-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEtMFUsBWR6kgYgZLuB%2F-MExE3EZmCrPEm1bwlhq%2F-MExEiqioFo6JOhp-W66%2Ficon_style_sidebar_opened.png?alt=media\&token=6400dd2c-7ff1-410c-a19c-3ae68e3b6dd5)

```
<layout title="Dashboard"
        sidebar-logo-url="/"
        :sidebar-logo-image="require(`@/assets/images/vuelogo.png`)"
>
    <template #headerRight>
        Add your components here
    </template>

    <template #sidebar>
        <sidebar-menu-item title="Small"
                           submenu-size="small"
        >
            <template #icon>
                <img :src="require(`@/assets/images/expand.svg`)" />
            </template>

            <h2>Small sub heading</h2>
        </sidebar-menu-item>
        <sidebar-menu-item title="Medium"
                           icon="someIcon"
                           submenu-size="medium"
        >
            <template #icon>
                <img :src="require(`@/assets/images/expand.svg`)" />
            </template>

            <h2>Medium sub heading</h2>
        </sidebar-menu-item>
        <sidebar-menu-item title="Half Screen"
                           icon="someIcon"
                           submenu-size="half-screen"
        >
            <template #icon>
                <img :src="require(`@/assets/images/expand.svg`)" />
            </template>

            <h2>Half screen sub heading</h2>
        </sidebar-menu-item>
        <sidebar-menu-item title="Full screen"
                           icon="someIcon"
                           submenu-size="full-screen"
        >
            <template #icon>
                <img :src="require(`@/assets/images/expand.svg`)" />
            </template>

            <h2>Full screen sub heading</h2>
        </sidebar-menu-item>
    </template>

    Body content
</layout>
```