Header

페이지 맨 위의 바로, 앞쪽 자리와 가운데, 뒤쪽 자리로 나뉩니다. 실제 <header>를 렌더링하며 문서 최상단에서 이 태그는 banner 랜드마크입니다.

import { AppLogo, Button, Header } from 'neba';

<Header brand={<AppLogo name="Neba" showName />} actions={<Button size="sm">로그인</Button>}>
  <nav>…</nav>
</Header>;

Props

Prop	타입	기본값	설명
brand	ReactNode	—	앞쪽 자리, 로고, 제품 이름, 모든 페이지에서 같은 것. 보통 AppLogo
children	ReactNode	—	가운데 자리, 대개 탐색
actions	ReactNode	—	뒤쪽 자리, 계정 메뉴, 테마 전환, 주요 행동. 끝에 붙여 배치되므로 버튼 여러 개를 감쌀 필요가 없습니다
align공통	'start' | 'center' | 'end'	'start'	가운데 자리가 어디에 놓이는지. center는 남는 공간이 아니라 바 자체의 중심선에 놓습니다. 그러려고 양끝에 같은 몫을 줍니다
position공통	'static' | 'sticky' | 'fixed'	'sticky'	스크롤 속에서 바가 놓이는 방식. sticky는 흐름 안에 남은 채 창 위에 붙고, fixed는 흐름에서 빠져나갑니다(PageLayout이 그 높이를 대신 비워 둡니다)
variant공통	'solid' | 'outline' | 'text'	'outline'	면의 무게. 바는 색으로 물들지 않습니다. 위에 놓이는 것이 이미 자기 색을 갖고 오기 때문입니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	바의 최소 높이와 거터. Box에서처럼 시트의 크기이며 타입 스케일은 건드리지 않습니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	의미론적 색 역할. 임의 색상값은 받지 않습니다
density공통	'default' | 'compact'	'default'	여백만 바꿉니다. 높이와 글자 크기는 그대로
elevation공통	0 | 1 | 2 | 3	0	그림자 깊이. 0은 그림자 없음
divider	boolean	true	아래 가장자리의 헤어라인. 스크롤되는 내용이 계속 지나가는 바이므로 기본으로 켜져 있습니다
maxWidth	NebaMeasure | Partial<Record<NebaBreakpoint, NebaMeasure>>	'none'	시트는 창을 가로지른 채, 안쪽 줄만 이 폭으로 묶어 가운데 놓습니다. Container와 같은 사다리이고, 직접 쓴 길이와 breakpoint별 map도 같은 방식으로 받습니다
padded	boolean	true	양쪽 거터
label	string	—	랜드마크의 이름. 한 페이지에 header가 둘 이상일 때 써 둘 만합니다
render	useRender.RenderProp	—	div 대신 다른 요소로 렌더링합니다 (render={<div />}). Base UI의 render prop 그대로

<header>의 native 속성은 그대로 전달됩니다. 다만 color와 title은 컴포넌트가 쓰는 이름입니다. 공통 축은 prop 규칙에서 설명합니다.

혼자서도 동작합니다. PageLayout 안에서는 자기 자신을 등록해, 자리를 지키는 Sidebar가 창 위에서 얼마나 내려와 시작해야 하는지 알게 합니다.

예시

brand · children · actions

세 자리입니다. brand는 앞쪽으로 로고나 제품 이름이 들어가고, children은 가운데로 대개 탐색이 들어가며, actions는 뒤쪽입니다. 끝에 붙여 배치되므로 버튼 여러 개를 따로 감쌀 필요가 없습니다. 아무것도 주지 않은 자리는 그려지지 않습니다.

align

가운데 자리가 어디에 놓이는지 정합니다. 기본값 start는 brand 바로 다음에 붙이고, center는 남는 공간이 아니라 바 자체의 중심선에 놓습니다. 그러려고 양끝에 같은 몫을 줍니다. end는 actions 쪽에 붙입니다.

import { useState } from 'react';
import { AppLogo, Button, Header, SegmentedButton, Segment, TextLink } from 'neba';
import type { NebaAlign } from 'neba';

export default function HeaderAlign() {
  const [align, setAlign] = useState<NebaAlign>('center');

  return (
    <div className="flex w-full flex-col gap-4">
      <SegmentedButton
        size="sm"
        value={align}
        onValueChange={(next) => setAlign(next as NebaAlign)}
      >
        <Segment value="start">start</Segment>
        <Segment value="center">center</Segment>
        <Segment value="end">end</Segment>
      </SegmentedButton>

      <Header
        align={align}
        position="static"
        brand={<AppLogo name="Neba" src="/128x128.png" showName size="sm" />}
        actions={
          <Button size="sm" variant="outline">
            Sign in
          </Button>
        }
        className="rounded-(--neba-radius-md)"
      >
        <nav className="flex items-center gap-4">
          <TextLink href="#" underline="hover">
            Docs
          </TextLink>
          <TextLink href="#" underline="hover">
            Pricing
          </TextLink>
        </nav>
      </Header>
    </div>
  );
}

position

기본값 sticky는 바를 흐름 안에 남겨 둔 채 창 위에 붙이므로, 다른 것을 밀어낼 필요가 없습니다. fixed는 흐름에서 빼내며 이때 PageLayout이 그 높이만큼 자리를 비워 둡니다. static이면 함께 스크롤되어 사라집니다.

variant

세 가지 무게는 다른 곳에서와 같은 뜻으로, 각각 채움과 헤어라인, 없음입니다. 바는 color로 물들지 않습니다. 위에 놓이는 것들이 자기 색을 갖고 오기 때문이며, 색 계열은 헤어라인과 focus 링에서 드러납니다.

import { AppLogo, Header } from 'neba';

export default function HeaderVariant() {
  return (
    <div className="flex w-full flex-col gap-4">
      {(['solid', 'outline', 'text'] as const).map((variant) => (
        <Header
          key={variant}
          variant={variant}
          position="static"
          brand={<AppLogo name="Neba" src="/128x128.png" showName size="sm" />}
          actions={<span className="text-(--neba-muted-fg) text-xs">{variant}</span>}
          className="rounded-(--neba-radius-md)"
        />
      ))}
    </div>
  );
}

maxWidth

시트는 창을 가로지른 채, 안쪽 줄만 이 폭으로 묶어 가운데에 놓습니다. Container와 같은 사다리이고, 직접 쓴 길이와 breakpoint별 map도 같은 방식으로 받습니다. 그래서 header와 그 아래 Container가 모든 너비에서 같은 선에서 시작합니다.

import { AppLogo, Button, Header } from 'neba';

export default function HeaderMeasure() {
  return (
    <Header
      position="static"
      maxWidth="sm"
      brand={<AppLogo name="Neba" src="/128x128.png" showName size="sm" />}
      actions={
        <Button size="sm" variant="outline">
          Sign in
        </Button>
      }
      className="rounded-(--neba-radius-md)"
    />
  );
}

divider

아래 가장자리의 헤어라인으로 기본값은 켜짐입니다. 스크롤되는 페이지 위에 고정된 바에는 언제나 내용이 지나가고 있어서, 가장자리를 표시하지 않은 반투명 시트는 그 내용의 일부처럼 보입니다.

접근성

• <header>를 렌더링하며, <article>이나 <section> 안이 아니라면 banner 랜드마크입니다.
• 한 페이지에 <header>가 둘 이상일 때(글 자체의 header와 사이트의 header) label을 주세요. 그러지 않으면 랜드마크 목록이 어느 쪽도 구분해 주지 못합니다.
• 가운데 자리의 탐색은 직접 <nav>로 감싸고, 한 페이지에 <nav>가 둘 이상이면 각각에 접근성 이름을 주세요.