Button Menu

<zn-button-menu> | ZnButtonMenu

Since 1.0

experimental

Automatically hides buttons in a menu when the screen is too small.

Something sdf

fdf

fsdsfdf

Home

WARNING

ddsfdsfdsf

34kjnsdfkjdsnf

dsfdf

dfsf

sdfdsfdsfds

dfsdfdsfdsfdsfsf


<zn-button-menu>
  <zn-button primary color="error">Something sdf</zn-button>
  <zn-button>sd</zn-button>
  <zn-button secondary color="success">fdf</zn-button>
  <zn-button secondary>fsdsfdf</zn-button>
  <zn-button>fd</zn-button>
  <zn-button category="edit" icon="Home">Home</zn-button>
  <zn-button color="warning" category="edit">WARNING</zn-button>
  <zn-button primary category="edit">ddsfdsfdsf</zn-button>
  <zn-button category="edit">34kjnsdfkjdsnf</zn-button>
  <zn-button primary category="edit">dsfdf</zn-button>
  <zn-button category="view">dfsf</zn-button>
  <zn-button category="view">sdfdsfdsfds</zn-button>
  <zn-button category="view">dfsdfdsfdsfdsfsf</zn-button>
</zn-button-menu>

Examples

Button Limit

You can limit the number of buttons that are shown in the menu. The rest will be hidden in a dropdown.

Something sdf

fdf

fsdsfdf

fdsfdf

dfsf


<zn-button-menu limit-buttons="2">
  <zn-button primary>Something sdf</zn-button>
  <zn-button >sd</zn-button>
  <zn-button secondary>fdf</zn-button>
  <zn-button secondary>fsdsfdf</zn-button>
  <zn-button >fd</zn-button>
  <zn-button category="edit">fdsfdf</zn-button>
  <zn-button primary category="edit">d</zn-button>
  <zn-button secondary category="view">dfsf</zn-button>
</zn-button-menu>

Max Width

Below is an example of a button menu with a maximum width of 200px. The menu will not exceed this width, even if the buttons inside it are wider.

Something sdf

fdf

fsdsfdf

fdsfdf

dfsf


<zn-button-menu max-width="200">
  <zn-button primary>Something sdf</zn-button>
  <zn-button >sd</zn-button>
  <zn-button secondary>fdf</zn-button>
  <zn-button secondary>fsdsfdf</zn-button>
  <zn-button >fd</zn-button>
  <zn-button category="edit">fdsfdf</zn-button>
  <zn-button primary category="edit">d</zn-button>
  <zn-button secondary category="view">dfsf</zn-button>
</zn-button-menu>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.0/dist/components/button-menu/button-menu.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.0/dist/components/button-menu/button-menu.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/button-menu/button-menu.js';

Slots

Name	Description
(default)	The default slot.

Learn more about using slots.