Ui.NavItem

A component to display a navigation item.

Interactive Demo

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

Size (16px)
<Ui.NavItem
size={Ui.Size.Px(16)}
item={Ui.NavItem.Link(
iconBefore: Ui.Icons.HOME,
iconAfter: <></>,
label: "Home",
target: "",
href: "/")}/>
Item

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

Home
Click Me!
Files
Main.mint
Logo.svg
<>
<Ui.NavItem
item={
Ui.NavItem.Link(
iconBefore: Ui.Icons.HOME,
iconAfter: <></>,
label: "Home",
target: "",
href: "/")
}
/>
<Ui.NavItem
item={
Ui.NavItem.Item(
iconBefore: Ui.Icons.BROADCAST,
label: "Click Me!",
iconAfter: <></>,
action:
(event : Html.Event) {
Ui.Notifications.notifyDefault(<>"Clicked!"</>)
})
}
/>
<Ui.NavItem item={Ui.NavItem.Divider}/>
<Ui.NavItem
item={
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.NavItem
size={Ui.Size.Px(12)}
item={
Ui.NavItem.Link(
iconBefore: Ui.Icons.HOME,
iconAfter: <></>,
label: "Home",
target: "",
href: "/")
}
/>
<Ui.NavItem
size={Ui.Size.Px(16)}
item={
Ui.NavItem.Link(
iconBefore: Ui.Icons.HOME,
iconAfter: <></>,
label: "Home",
target: "",
href: "/")
}
/>
<Ui.NavItem
size={Ui.Size.Px(20)}
item={
Ui.NavItem.Link(
iconBefore: Ui.Icons.HOME,
iconAfter: <></>,
label: "Home",
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.