# Popout Menu
<DemoContainer>
  <PopoutMenu class="btn" position="bottom" direction="left">
    Bottom going left
    <template #menu>
      Menu contents!
      Menu contents!
      Menu contents!
    </template>
  </PopoutMenu>
  <PopoutMenu class="btn" position="bottom" direction="right">
    Bottom going right
    <template #menu>
      Menu contents!
      Menu contents!
      Menu contents!
    </template>
  </PopoutMenu>
  <PopoutMenu class="btn" position="top" direction="left">
    Top going left
    <template #menu>
      Menu contents!
      Menu contents!
      Menu contents!
    </template>
  </PopoutMenu>
  <PopoutMenu class="btn" position="top" direction="right">
    Top going right
    <template #menu>
      Menu contents!
      Menu contents!
      Menu contents!
    </template>
  </PopoutMenu>
  <PopoutMenu class="btn" position="left" direction="up">
    Left going up
    <template #menu>
      Menu contents!
      Menu contents!
      Menu contents!
    </template>
  </PopoutMenu>
  <PopoutMenu class="btn" position="left" direction="down">
    Left going down
    <template #menu>
      Menu contents!
      Menu contents!
      Menu contents!
    </template>
  </PopoutMenu>
  <PopoutMenu class="btn" position="right" direction="up">
    Right going up
    <template #menu>
      Menu contents!
      Menu contents!
      Menu contents!
    </template>
  </PopoutMenu>
  <PopoutMenu class="btn" position="right" direction="down">
    Right going down
    <template #menu>
      Menu contents!
      Menu contents!
      Menu contents!
    </template>
  </PopoutMenu>
</DemoContainer>

```vue
<PopoutMenu class="btn" position="bottom" direction="right">
  Bottom going right
  <template #menu>
    Menu contents!
  </template>
</PopoutMenu>
```