Ui.NavItems

Display navigation items vertically in a tree like structure.

Interactive Demo

You can play around with a Ui.NavItems below using the controls.

Home
Click Me!
Files
Main.mint
Header.mint
Footer.mint
Logo.svg
Size (16px)
<Ui.NavItems
size={Ui.Size.Px(16)}
items=[
Ui.NavItem.Link(
iconBefore: Ui.Icons.HOME,
iconAfter: <></>,
label: "Home",
target: "",
href: "/"),
Ui.NavItem.Item(
iconBefore: Ui.Icons.BROADCAST,
label: "Click Me!",
iconAfter: <></>,
action:
(event : Html.Event) { Ui.Notifications.notifyDefault(<>"Clicked!"</>) }),
Ui.NavItem.Divider,
Ui.NavItem.Group(
iconBefore: Ui.Icons.FILE_DIRECTORY,
iconAfter: <></>,
label: "Files",
items:
[
Ui.NavItem.Item(
iconBefore: Ui.Icons.FILE_CODE,
action: Promise.never1,
label: "Main.mint",
iconAfter: <></>),
Ui.NavItem.Item(
iconBefore: Ui.Icons.FILE_CODE,
action: Promise.never1,
label: "Header.mint",
iconAfter: <></>),
Ui.NavItem.Item(
iconBefore: Ui.Icons.FILE_CODE,
action: Promise.never1,
label: "Footer.mint",
iconAfter: <></>),
Ui.NavItem.Item(
iconBefore: Ui.Icons.FILE_MEDIA,
action: Promise.never1,
label: "Logo.svg",
iconAfter: <></>)
])
]/>
Items

The items to display can be set with the items property.

Files
Main.mint
Logo.svg
<>
<Ui.NavItems
items=[
Ui.NavItem.Group(
iconBefore: Ui.Icons.FILE_DIRECTORY,
iconAfter: <></>,
label: "Files",
items:
[
Ui.NavItem.Item(
iconBefore: Ui.Icons.FILE_CODE,
action: Promise.never1,
label: "Main.mint",
iconAfter: <></>),
Ui.NavItem.Item(
iconBefore: Ui.Icons.FILE_MEDIA,
action: Promise.never1,
label: "Logo.svg",
iconAfter: <></>)
])
]
/>
</>
Size

The size of the component can be set with the size property.

<>
<Ui.NavItems
size={Ui.Size.Px(12)}
items=[
Ui.NavItem.Link(
iconBefore: Ui.Icons.HOME,
iconAfter: <></>,
label: "Home",
href: "/",
target: ""),
Ui.NavItem.Divider,
Ui.NavItem.Link(
iconBefore: Ui.Icons.TELESCOPE,
iconAfter: <></>,
label: "Explore",
href: "/",
target: "")
]
/>
<Ui.NavItems
size={Ui.Size.Px(16)}
items=[
Ui.NavItem.Link(
iconBefore: Ui.Icons.HOME,
iconAfter: <></>,
label: "Home",
target: "",
href: "/"),
Ui.NavItem.Divider,
Ui.NavItem.Link(
iconBefore: Ui.Icons.TELESCOPE,
iconAfter: <></>,
label: "Explore",
target: "",
href: "/")
]
/>
<Ui.NavItems
size={Ui.Size.Px(20)}
items=[
Ui.NavItem.Link(
iconBefore: Ui.Icons.HOME,
iconAfter: <></>,
label: "Home",
target: "",
href: "/"),
Ui.NavItem.Divider,
Ui.NavItem.Link(
iconBefore: Ui.Icons.TELESCOPE,
iconAfter: <></>,
label: "Explore",
target: "",
href: "/")
]
/>
</>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.