A component for displaying navigation items for websites and applications.
On mobile resolution the navigation collapses into an icon which tapped opens an action sheet with the navigation items.
<Ui.Header icon={Ui.Icons:THREE_BARS} size={Ui.Size.Px(16)} brand=<{ "Brand" }> breakpoint={0} items={[ Ui.NavItem.Link( iconBefore: Ui.Icons.HOME, iconAfter: <></>, label: "Home", target: "", href: "/"), Ui.NavItem.Divider, Ui.NavItem.Link( iconBefore: Ui.Icons.BEAKER, label: "Laboratory", iconAfter: <></>, target: "", href: "/") ]}/>
<Ui.Header brand=<>brand</> breakpoint={0} items=[ Ui.NavItem.Link( iconBefore: Ui.Icons.HOME, iconAfter: <></>, label: "Home", target: "", href: "/"), Ui.NavItem.Divider, Ui.NavItem.Group( iconBefore: Ui.Icons.CHEVRON_DOWN, iconAfter: <></>, label: "Actions", items: [ Ui.NavItem.Link( iconBefore: Ui.Icons.KEY, iconAfter: <></>, label: "Sign Up", target: "", href: "/"), Ui.NavItem.Link( iconBefore: Ui.Icons.SIGN_IN, iconAfter: <></>, label: "Sign in", target: "", href: "/") ]) ]/>
<> <Ui.Header icon={Ui.Icons.TASKLIST} brand=<>"Brand"</> items=[ Ui.NavItem.Link( iconBefore: Ui.Icons.HOME, iconAfter: <></>, label: "Home", target: "", href: "/") ] /> <Ui.Header icon={Ui.Icons.TERMINAL} brand=<>"Brand"</> items=[ Ui.NavItem.Link( iconBefore: Ui.Icons.HOME, iconAfter: <></>, label: "Home", target: "", href: "/") ] /></>
<> <Ui.Header size={Ui.Size.Px(12)} brand=<>"Brand"</> items=[ Ui.NavItem.Link( iconBefore: Ui.Icons.HOME, iconAfter: <></>, label: "Home", target: "", href: "/") ] /> <Ui.Header size={Ui.Size.Px(16)} brand=<>"Brand"</> items=[ Ui.NavItem.Link( iconBefore: Ui.Icons.HOME, iconAfter: <></>, label: "Home", target: "", href: "/") ] /> <Ui.Header size={Ui.Size.Px(20)} brand=<>"Brand"</> items=[ Ui.NavItem.Link( iconBefore: Ui.Icons.HOME, iconAfter: <></>, label: "Home", target: "", href: "/") ] /></>
Mint UI is a design system and component library for building websites, web and desktop applications.