Header

A presentational layout component that arranges content into a horizontal strip. It provides four named slots — before, logo, content, and after — and sits sticky at the top of the page by default.

Playground

Controls

Background

Theme

HTMLReact

ShareCopy

Usage

<lt-header>
<lt-icon slot="before" name="menu"></lt-icon>
<span slot="logo">Brand</span>
<lt-nav slot="content" orientation="horizontal">
  <lt-nav-item href="/" label="Home"></lt-nav-item>
  <lt-nav-item href="/about" label="About"></lt-nav-item>
  <lt-nav-item label="More">
    <lt-nav-item href="/blog" label="Blog"></lt-nav-item>
    <lt-nav-item href="/changelog" label="Changelog"></lt-nav-item>
  </lt-nav-item>
</lt-nav>
<lt-icon slot="after" name="user"></lt-icon>
</lt-header>

import { Header, Nav, NavItem, Icon } from '@latty-ds/react';

<Header>
<Icon slot="before" name="menu" />
<span slot="logo">Brand</span>
<Nav slot="content" orientation="horizontal">
  <NavItem href="/" label="Home" />
  <NavItem href="/about" label="About" />
  <NavItem label="More">
    <NavItem href="/blog" label="Blog" />
    <NavItem href="/changelog" label="Changelog" />
  </NavItem>
</Nav>
<Icon slot="after" name="user" />
</Header>

<template>
<lt-header>
  <lt-icon slot="before" name="menu"></lt-icon>
  <span slot="logo">Brand</span>
  <lt-nav slot="content" orientation="horizontal">
    <lt-nav-item href="/" label="Home"></lt-nav-item>
    <lt-nav-item href="/about" label="About"></lt-nav-item>
    <lt-nav-item label="More">
      <lt-nav-item href="/blog" label="Blog"></lt-nav-item>
      <lt-nav-item href="/changelog" label="Changelog"></lt-nav-item>
    </lt-nav-item>
  </lt-nav>
  <lt-icon slot="after" name="user"></lt-icon>
</lt-header>
</template>

API