Cyberpunk Vue

# Menu

Top bar

Top bar NavMenu can be used in a variety of scenarios.

Home
About
Hire
Google
<c-menu :selected.sync="selectedMenu" :multiple="false">
  <c-menu-item name="home">Home</c-menu-item>
  <c-sub-menu name="about">
    <template slot="title">About</template>
    <c-menu-item name="about1">About1</c-menu-item>
    <c-menu-item name="about2">About1</c-menu-item>
    <c-sub-menu name="contact">
      <template slot="title">Contact</template>
      <c-menu-item name="qq">QQ</c-menu-item>
      <c-menu-item name="phone">Phone</c-menu-item>
      <c-menu-item name="wechat">WeChat</c-menu-item>
    </c-sub-menu>
  </c-sub-menu>
  <c-menu-item name="hire">Hire</c-menu-item>
  <c-menu-item name="google">
    <a href="https://google.com" target="_blank">Google</a>
  </c-menu-item>
</c-menu>
显示代码

Side bar

Vertical NavMenu with sub-menus.

Home
About
Hire
Google
<c-menu
  :selected.sync="selectedMenu2"
  :multiple="false"
  direction="vertical"
  style="width: 265px;"
>
  <c-menu-item name="home">Home</c-menu-item>
  <c-sub-menu name="about">
    <template slot="title">About</template>
    <c-menu-item name="about1">About1</c-menu-item>
    <c-menu-item name="about2">About1</c-menu-item>
    <c-sub-menu name="contact">
      <template slot="title">Contact</template>
      <c-menu-item name="qq">QQ</c-menu-item>
      <c-menu-item name="phone">Phone</c-menu-item>
      <c-menu-item name="wechat">WeChat</c-menu-item>
    </c-sub-menu>
  </c-sub-menu>
  <c-menu-item name="hire">Hire</c-menu-item>
  <c-menu-item name="google">
    <a href="https://google.com" target="_blank">Google</a>
  </c-menu-item>
</c-menu>
Expand

Menu Attributes

Attribute Description Type Accepted Values Default
selected The selected menu item needs to be used with the .sync modifier Array —— ——
multiple Whether to support multiple selection, if set to true, just pass in an item in selected Boolean —— false
direction The direction of the menu String horizontal / vertical horizontal

Sub-Menu Attributes

Attribute Description Type Accepted Values Default
name Unique key string —— ——

Menu-Item Attributes

Attribute Description Type Accepted Values Default
name Unique key string —— ——

← Pagination →