메인 툴바

업무 화면 맨 위의 한 줄. 왼쪽에 화면 제목과 보기 전환, 넓은 화면에서는 설명을 두고 오른쪽 끝에 그 화면의 주 동작을 둔다. 브레드크럼, 좁은 화면의 설명, 등록 시각 같은 기록 줄은 툴바 아래에 작게 놓인다. 스크롤해도 --deux-sticky-top 높이에 붙어 있고, 상태가 없어 서버에서 렌더된다.

활용 방법

목록 화면

views 에 보기 전환, actions 에 주 동작을 둔다. 단추가 많아 넘치면 actions 칸 안에서 가로로 스크롤되고 본문에는 가로 스크롤이 생기지 않는다.

Preview

품목

화면 본문

tsx

<MainToolbar
  title="품목"
  views={<SegmentControl items={["목록", "카드"]} />}
  actions={<Button size="sm" variant="primary">추가</Button>}
/>

상세 화면

crumbs 와 meta 는 툴바 아래 한 줄에 놓인다. description 은 xl 이상에서 제목 옆, 그보다 좁으면 이 줄로 내려온다.

Preview

볼트 M8

창고 A 보관 품목

등록 2026-10-01 · 수정 2026-10-05

화면 본문

tsx

<MainToolbar
  title="볼트 M8"
  description="창고 A 보관 품목"
  crumbs={[{ label: "기준정보" }, { label: "품목", href: "/items" }, { label: "볼트 M8" }]}
  meta="등록 2026-10-01 · 수정 2026-10-05"
/>

속성

이름	타입	기본값	설명
title	ReactNode	-	화면 제목. h1 로 렌더된다
description	ReactNode	-	한 줄 설명. xl 이상은 제목 옆, 그보다 좁으면 툴바 아래
views	ReactNode	-	제목 옆의 보기 전환
actions	ReactNode	-	오른쪽 끝의 주 동작. 넘치면 이 칸 안에서 가로 스크롤
crumbs	BreadcrumbItem[]	-	툴바 아래의 현재 위치
meta	ReactNode	-	툴바 아래의 기록 줄
flush	boolean	false	아래 줄과 여백을 그리지 않는다. SubToolbar 를 붙일 때 준다
className	string	-	header 클래스
ref	Ref<HTMLElement>	-	header. native props 도 header 에 적용된다