layout

Header

スティッキー配置やバックドロップブラーに対応した柔軟なサイトヘッダー。レスポンシブなモバイルメニュー付き。

インポート

import { Header, HeaderBrand, HeaderNav, HeaderActions } from '@stella-ds/react'

HeaderHeaderBrandHeaderNavHeaderActions

Props

Prop	型	デフォルト	説明
sticky	boolean	false	Sticks to viewport top
blur	boolean	true	Applies backdrop blur when sticky
mobileNav	ReactNode	undefined	Mobile hamburger menu content

使用例

Sticky

<Header sticky>
  <HeaderBrand>Stella UI</HeaderBrand>
  <HeaderNav>
    <a href="/">Home</a>
    <a href="/docs">Docs</a>
  </HeaderNav>
  <HeaderActions>
    <Button size="sm">Get Started</Button>
  </HeaderActions>
</Header>

← Footer

コンポーネント一覧

Heading →