Display navigation items vertically in a tree like structure.
<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: <></>) ]) ]/>
<> <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: <></>) ]) ] /></>
<> <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 is a design system and component library for building websites, web and desktop applications.