Ui.Header

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.

Interactive Demo

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

Brand
Icon
Three Bars
Size (16px)
Breakpoint (0px)
<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: "/")
]}/>
Brand

The brand content can be set using the brand property.

Brand
<>
<Ui.Header brand=<>"Brand"</>/>
<Ui.Header brand=<><Ui.Button label="I am a Button!"/></>/>
</>
Items

The provided items specified by the items property show up on the right side of the header.

Brand
Home
Actions
<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: "/")
])
]
/>
Icon

The icon to display on mobile resultions (which opens the action sheet) can be set using the icon property.

Brand
Brand
<>
<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: "/")
]
/>
</>
Size

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

Brand
Brand
Brand
<>
<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

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.