Header

ヘッダーはこのように構成されています 👇

<header class="site-header">
	<div class="container">
		<div class="site-header-inner">
 
			<!-- Logo image or site name -->
			<div class="brand">
				<h1 class="m-0">
					<a href="#">
						<!-- Site name, or image (ideal size: 32x32px) -->
					</a>
				</h1>
			</div>
 
			<!-- Hamburger button for mobile -->
			<button id="header-nav-toggle" class="header-nav-toggle" aria-controls="primary-menu" aria-expanded="false">
				<span class="screen-reader">Menu</span>
				<span class="hamburger">
					<span class="hamburger-inner"></span>
				</span>
			</button>
 
			<!-- Header navigation -->
			<nav id="header-nav" class="header-nav">
				<div class="header-nav-inner">
 
				  <!-- Primary navigation -->
					<!-- It supports .header-nav-center and .header-nav-right classes -->
					<ul class="list-reset text-xxs">
						<li>
							<a href="#">Header link</a>
						</li>
					</ul>
 
					<!-- Secondary navigation (e.g. CTA buttons) -->
					<ul class="list-reset header-nav-right">
						<li>
							<a class="button button-sm" href="#">Sign up</a>
						</li>
					</ul>
 
				</div>
			</nav>
 
		</div>
	</div>
</header>

React と Vue では、ヘッダーコンポーネントは /src/components/layout/ フォルダーにあり、この方法でインポート/使用できます 👇

<c-header />

Logo

すべてのテンプレートには SVG ロゴ (/src/images/ フォルダーに同梱) が含まれており、推奨サイズは 32x32px です。

<img src="images/logo.svg" alt="Abstract" width="32" height="32">

React と Vue では、ロゴは部分ファイルとして含まれ、/src/components/layout/partials/ フォルダーに保存されます。

React,next.jsのテンプレートのソースフォルダー構成はモデルとして、利用できます。

ナビゲーションの配置

上の例に示すように、ヘッダーにはプライマリナビゲーション (メニューリンク用)、セカンダリナビゲーション (ボタン用)、またはその両方を含めることができます。

プライマリナビゲーションはデフォルトで左揃えです。 .header-nav-center クラスを追加してコンテンツを中央揃えにすることも、 .header-nav-right クラスを使用して右揃えにすることもできます。

通常、セカンダリナビゲーションはデフォルトで右揃えなので、後者の <ul> 要素にはデフォルトで .header-nav-right クラスが付属します。

<!-- Primary navigation, left align -->
<ul class="list-reset text-xxs">
	<li>
		<a href="#">Header link</a>
	</li>
</ul>
<!-- Primary navigation, center align -->
<ul class="list-reset text-xxs header-nav-center">
	<li>
		<a href="#">Header link</a>
	</li>
</ul>
<!-- Primary navigation, right align -->
<ul class="list-reset text-xxs header-nav-right">
	<li>
		<a href="#">Header link</a>
	</li>
</ul>

ヘッダーコンポーネントで navPosition (React) または nav-position (Vue) プロパティを使用して、主要なナビゲーションの配置を変更できます 👇

<!-- Primary navigation, center align -->
<Header navPosition="center" />
<!-- Primary navigation, right align -->
<Header navPosition="right" />

ナビゲーションを非表示にする

プライマリナビゲーションとセカンダリナビゲーションを非表示にする場合は、HTML テンプレートのコードを数行削除するだけで済みます。React と Vue では、プロセスを高速化するためのオプションがいくつか提供されています。以下の例を見てみましょう 👇

<!-- Hide both primary and secondary navigation -->
<Header hideNav />
<!-- Hide the secondary navigation only -->
<Header hideSignin />

下枠

ヘッダー領域の下部に境界線を表示したい場合は、以下の例のように .has-bottom-divider ヘルパークラスを使用できます 👇?

<header class="site-header">
	<div class="container">
		<div class="site-header-inner has-bottom-divider">
			<!-- header content -->
		</div>
	</div>
</header>

React と Vue にはそのための prop があります 👇

<c-header bottom-divider />

フルー幅のディバイダーの場合は、.has-bottom-divider クラスを .site-header 要素に追加します 👇

<header class="site-header has-bottom-divider">
	<div class="container">
		<div class="site-header-inner">
			<!-- header content -->
		</div>
	</div>
</header>

React と Vue にはそのための prop があります 👇

<c-header bottom-outer-divider />

属性一覧

React

Prop	Type	Default	Accepted values
`navPosition`	string	–	It’s left by default, accepts `center` and `right`
`hideNav`	boolean	`false`	–
`hideSignin`	boolean	`false`	–
`bottomOuterDivider`	boolean	`false`	–
`bottomDivider`	boolean	`false`	–

vue

Prop	Type	Default	Accepted values
`nav-position`	string	–	It’s left by default, accepts `center` and `right`
`hide-nav`	boolean	`false`	–
`hide-signin`	boolean	`false`	–
`bottom-outer-divider`	boolean	`false`	–
`bottom-divider`	boolean	`false`	–

React と Vue では、ナビゲーションリンクをヘッダーコンポーネントにネストする必要があります。

レイアウトフッタ