NOTE: Introduced feature in
v0.2.2
.
Menu
renders a nestable list of actionable buttons and links. Typically used in context menus or used as the main content body of Aside
.
<script>
import {
Menu,
Spacer,
Text,
} from "@kahi-ui/framework";
</script>
<Menu.Container>
<Menu.Button>
Copy
<Spacer />
<Text is="small">CTRL+C</Text>
</Menu.Button>
<Menu.Button>
Cut
<Spacer />
<Text is="small">CTRL+X</Text>
</Menu.Button>
<Menu.Heading />
<Menu.Button>
Delete
<Spacer />
<Text is="small">DEL</Text>
</Menu.Button>
</Menu.Container>
Imports
<script>
import {Menu} from "@kahi-ui/framework";
const {
Container,
Anchor,
Button,
Heading,
Label,
Section,
} = Menu;
</script>
Orientation
NOTE: By passing an array, you can set responsive values. e.g.
orientation={["tablet:horizontal", "mobile:horizontal"]}
IMPORTANT: You should never use sub menus whenever using horizontal
Menu.Container
Components.
You can alter the orientation of how the Menu.Container
lays out the children.
<script>
import {Menu} from "@kahi-ui/framework";
</script>
<Menu.Container orientation="horizontal">
<Menu.Button>Documentation</Menu.Button>
<Menu.Button>Github</Menu.Button>
<Menu.Button>Releases</Menu.Button>
</Menu.Container>
Sections
WARNING: This feature was renamed from
<Menu.SubMenu>
to<Menu.Section>
inv0.6.0
.
WARNING: This feature received a breaking change in
v0.6.0
.
You can nest more menus via the <Menu.Section>
Component.
<script>
import {
Box,
Menu,
Spacer,
Text,
} from "@kahi-ui/framework";
</script>
<Box palette="negative" padding="medium">
<Menu.Container>
<Menu.Heading>FEEDBACK</Menu.Heading>
<Menu.Section>
<Menu.Button active>
Dot
<Spacer />
<Text is="span">ICON</Text>
</Menu.Button>
<Menu.Button>
Spinner
<Spacer />
<Text is="span">ICON</Text>
</Menu.Button>
</Menu.Section>
<Menu.Heading>OVERLAYS</Menu.Heading>
<Menu.Section>
<Menu.Button>
Overlay
<Spacer />
<Text is="span">ICON</Text>
</Menu.Button>
</Menu.Section>
</Menu.Container>
</Box>
Text Divider
WARNING: This feature was renamed from
<Menu.Divider>...</Menu.Divider>
to<Menu.Heading variation="divider">...</Menu.Heading>
inv0.6.0
.
You can alter <Menu.Heading>
to render dividers via the variation
property.
<script>
import {
Box,
Menu,
Spacer,
Text,
} from "@kahi-ui/framework";
</script>
<Box palette="negative" padding="medium">
<Menu.Container>
<Menu.Heading variation="divider">
FEEDBACK
</Menu.Heading>
<Menu.Section>
<Menu.Button active>
Dot
<Spacer />
<Text is="span">ICON</Text>
</Menu.Button>
<Menu.Button>
Spinner
<Spacer />
<Text is="span">ICON</Text>
</Menu.Button>
</Menu.Section>
</Menu.Container>
</Box>
Palette
You can change the color palette of the Menu.Anchor
, Menu.Button
, and Menu.Label
Components via the palette
property.
<script>
import {
Menu,
Mosaic,
Spacer,
} from "@kahi-ui/framework";
</script>
<Mosaic.Container sizing="medium" spacing="medium">
<Menu.Container>
<Menu.Heading>DEFAULT</Menu.Heading>
<Menu.Section>
<Menu.Button active>
Dot
<Spacer />
<span>ICON</span>
</Menu.Button>
<Menu.Button>
Spinner
<Spacer />
<span>ICON</span>
</Menu.Button>
</Menu.Section>
</Menu.Container>
<Menu.Container>
<Menu.Heading>ACCENT</Menu.Heading>
<Menu.Section>
<Menu.Button palette="accent" active>
Dot
<Spacer />
<span>ICON</span>
</Menu.Button>
<Menu.Button palette="accent">
Spinner
<Spacer />
<span>ICON</span>
</Menu.Button>
</Menu.Section>
</Menu.Container>
<Menu.Container>
<Menu.Heading>NEUTRAL</Menu.Heading>
<Menu.Section>
<Menu.Button palette="neutral" active>
Dot
<Spacer />
<span>ICON</span>
</Menu.Button>
<Menu.Button palette="neutral">
Spinner
<Spacer />
<span>ICON</span>
</Menu.Button>
</Menu.Section>
</Menu.Container>
<Menu.Container>
<Menu.Heading>DARK</Menu.Heading>
<Menu.Section>
<Menu.Button palette="dark" active>
Dot
<Spacer />
<span>ICON</span>
</Menu.Button>
<Menu.Button palette="dark">
Spinner
<Spacer />
<span>ICON</span>
</Menu.Button>
</Menu.Section>
</Menu.Container>
<Menu.Container>
<Menu.Heading>LIGHT</Menu.Heading>
<Menu.Section>
<Menu.Button palette="light" active>
Dot
<Spacer />
<span>ICON</span>
</Menu.Button>
<Menu.Button palette="light">
Spinner
<Spacer />
<span>ICON</span>
</Menu.Button>
</Menu.Section>
</Menu.Container>
<Menu.Container>
<Menu.Heading>ALERT</Menu.Heading>
<Menu.Section>
<Menu.Button palette="alert" active>
Dot
<Spacer />
<span>ICON</span>
</Menu.Button>
<Menu.Button palette="alert">
Spinner
<Spacer />
<span>ICON</span>
</Menu.Button>
</Menu.Section>
</Menu.Container>
<Menu.Container>
<Menu.Heading>AFFIRMATIVE</Menu.Heading>
<Menu.Section>
<Menu.Button palette="affirmative" active>
Dot
<Spacer />
<span>ICON</span>
</Menu.Button>
<Menu.Button palette="affirmative">
Spinner
<Spacer />
<span>ICON</span>
</Menu.Button>
</Menu.Section>
</Menu.Container>
<Menu.Container>
<Menu.Heading>INFORMATIVE</Menu.Heading>
<Menu.Section>
<Menu.Button palette="informative" active>
Dot
<Spacer />
<span>ICON</span>
</Menu.Button>
<Menu.Button palette="informative">
Spinner
<Spacer />
<span>ICON</span>
</Menu.Button>
</Menu.Section>
</Menu.Container>
<Menu.Container>
<Menu.Heading>NEGATIVE</Menu.Heading>
<Menu.Section>
<Menu.Button palette="negative" active>
Dot
<Spacer />
<span>ICON</span>
</Menu.Button>
<Menu.Button palette="negative">
Spinner
<Spacer />
<span>ICON</span>
</Menu.Button>
</Menu.Section>
</Menu.Container>
</Mosaic.Container>
Sizing
NOTE: By passing an array, you can set responsive values. e.g.
sizing={["tiny", "tablet:medium", "mobile:medium"]}
You can change the sizing / spacing look and feel of the Menu.Container
via the sizing
property.
<script>
import {
Menu,
Mosaic,
Spacer,
} from "@kahi-ui/framework";
</script>
<Mosaic.Container sizing="medium" spacing="medium">
<Menu.Container>
<Menu.Heading>DEFAULT</Menu.Heading>
<Menu.Section>
<Menu.Button active>
Dot
<Spacer />
<span>ICON</span>
</Menu.Button>
<Menu.Button>
Spinner
<Spacer />
<span>ICON</span>
</Menu.Button>
</Menu.Section>
</Menu.Container>
<Menu.Container sizing="nano">
<Menu.Heading>NANO</Menu.Heading>
<Menu.Section>
<Menu.Button active>
Dot
<Spacer />
<span>ICON</span>
</Menu.Button>
<Menu.Button>
Spinner
<Spacer />
<span>ICON</span>
</Menu.Button>
</Menu.Section>
</Menu.Container>
<Menu.Container sizing="tiny">
<Menu.Heading>TINY</Menu.Heading>
<Menu.Section>
<Menu.Button active>
Dot
<Spacer />
<span>ICON</span>
</Menu.Button>
<Menu.Button>
Spinner
<Spacer />
<span>ICON</span>
</Menu.Button>
</Menu.Section>
</Menu.Container>
<Menu.Container sizing="small">
<Menu.Heading>SMALL</Menu.Heading>
<Menu.Section>
<Menu.Button active>
Dot
<Spacer />
<span>ICON</span>
</Menu.Button>
<Menu.Button>
Spinner
<Spacer />
<span>ICON</span>
</Menu.Button>
</Menu.Section>
</Menu.Container>
<Menu.Container sizing="medium">
<Menu.Heading>MEDIUM</Menu.Heading>
<Menu.Section>
<Menu.Button active>
Dot
<Spacer />
<span>ICON</span>
</Menu.Button>
<Menu.Button>
Spinner
<Spacer />
<span>ICON</span>
</Menu.Button>
</Menu.Section>
</Menu.Container>
<Menu.Container sizing="large">
<Menu.Heading>LARGE</Menu.Heading>
<Menu.Section>
<Menu.Button active>
Dot
<Spacer />
<span>ICON</span>
</Menu.Button>
<Menu.Button>
Spinner
<Spacer />
<span>ICON</span>
</Menu.Button>
</Menu.Section>
</Menu.Container>
<Menu.Container sizing="huge">
<Menu.Heading>HUGE</Menu.Heading>
<Menu.Section>
<Menu.Button active>
Dot
<Spacer />
<span>ICON</span>
</Menu.Button>
<Menu.Button>
Spinner
<Spacer />
<span>ICON</span>
</Menu.Button>
</Menu.Section>
</Menu.Container>
<Menu.Container sizing="massive">
<Menu.Heading>MASSIVE</Menu.Heading>
<Menu.Section>
<Menu.Button active>
Dot
<Spacer />
<span>ICON</span>
</Menu.Button>
<Menu.Button>
Spinner
<Spacer />
<span>ICON</span>
</Menu.Button>
</Menu.Section>
</Menu.Container>
</Mosaic.Container>