Navbar Pro
Navbar Proは，Blocs for Macで制作するサイトのナビゲーションを構成するBricです。横長のロゴ，サイト内のメニュー，言語リンク，ライト・ダークの切り替えをひとつのバーにまとめます。プレビューと公開サイトでは画面上部に固定され，画面幅に応じてハンバーガーメニューへ切り替わります。
ロゴと配色を明暗それぞれに用意できるほか，下スクロールでバーを隠す動作や，写真などの領域に重なったときの透明・半透明表示を設定できます。サイト共通のヘッダーとして使う場合は，上側のGlobal Areaへ1つ配置します。
Navbar Pro 1.0.11 をダウンロード ／ 使い方
表示例
eMotionGraphics Almanacでは，Navbar Proを実際のサイトナビゲーションとして使っています。同ページを開くと，画面幅による表示の切り替え，メニューの開閉，明暗切替を操作できます。以下は英語表示の公開ページを撮影し，囲みと矢印，日本語の説明ラベルを加えたものです。
横並びのナビゲーション
ロゴ領域は左へ，メニューと操作項目をまとめた領域は右へ配置します。右側にはサイトリンクだけでなく，明暗スイッチと言語リンクも含まれます。
Figure 1: 画面幅1280pxの例。青がロゴ領域，赤がメニュー・明暗スイッチ・言語リンクをまとめた領域です。
ハンバーガーボタンと展開したメニュー
狭い画面では，横並びの項目をハンバーガーボタンへまとめます。ボタンを押すとメニューが開き，閉じるボタンへ変わります。
Figure 2: メニューを閉じた状態。赤で囲んだボタンから開きます。
Figure 3: 画面幅393pxで開いた状態。1は閉じるボタン，2はサイトリンク，3は明暗スイッチ，4は言語リンクです。Aboutの赤い文字は，現在ページの強調表示です。
撮影したサイトのToggleはMDで，991px以下になるとハンバーガーへ切り替わります。Bricを新しく配置したときの初期値はLGで，1199px以下が対象です。切替幅は使い方のToggleで変更できます。
できること
| 機能 | 表示・動作 |
|---|---|
| ロゴとメニュー | ロゴを左側に，メニューや言語リンクなどを右側に配置 |
| ハンバーガーメニュー | 指定した画面幅以下でリンクをまとめ，ボタンから開閉 |
| 現在ページの強調 | 開いているページと一致するメニューリンクをHighlightの色で表示 |
| 言語リンク | 表示中のページに対応する別言語版へ移動。現在言語はテキストで表示 |
| 明暗切替 | ライト・ダークでロゴとリンクの配色を切り替え，選択をブラウザーに保存 |
| スクロール時の表示 | 下へ進むとバーを隠し，上へ戻ると再表示 |
| Overlay | 指定したクラスの領域に重なる間，バーの背景を透明・半透明へ変更 |
| 幅の調整 | 内側の最大幅を指定して中央寄せ，または親カラムの幅へ合わせる |
メニューは1階層です。ドロップダウンやメガメニューを組む機能はありません。また，言語リンクの設定で翻訳や各言語のページが自動生成されるわけではありません。ページ本文の明暗配色も，サイト側に対応するスタイルを用意します。
必要な環境
Blocs 6 for Mac向けのBricです。メニュー開閉，言語リンクの生成，スクロール時の表示制御，明暗切替にはJavaScriptを使います。明暗の選択はブラウザーのlocalStorageへ保存します。
編集キャンバスでロゴやリンクを設定した後，動作はプレビューまたは公開サイトで確認してください。現在ページの強調と明暗スイッチの操作は，キャンバス上だけでは確認できません。
使い方
- サイト共通なら上側のGlobal Areaに1つ配置します。
- 明暗それぞれのロゴと，サイトのメニュー・言語リンクを登録します。
- ハンバーガーへ切り替える幅を選び，プレビューで確認します。
詳しい入力形式，明暗とスクロールの動作，Overlay，公開前の確認は使い方へ進んでください。Math RendererやCode Highlighterを置く専用Blocとは別に，ヘッダーとして配置します。
設定項目
ロゴ・配色・メニュー・動作・Overlayを設定できます。各項目の初期値と範囲は設定リファレンスにまとめています。
詳しい説明
| 読みたいこと | 案内 |
|---|---|
| 配置から公開前の確認まで進めたい | Navbar Proの使い方 |
| 項目の初期値や範囲を調べたい | 設定リファレンス |
確認範囲
2026年11月7日に，Navbar Pro 1.0.11の設定データと公開用コードを確認し，ローカルで言語リンクの生成を検証しました。メニューにはARIA属性がありますが，Escapeキーで閉じる処理と，開いているメニュー内へフォーカスを留める処理はありません。公開前に，使用する端末と操作方法で確認してください。
表示例は，2026年10月27日に公開中のAboutページをFirefoxのレスポンシブ表示で撮影しました。画面幅1280pxと393px，デバイスピクセル比3の画像を使い，元画像を描き直さず，SVGの囲み・矢印・ラベルを重ねています。専用のデモページは作成していません。
以前の記事の見出しから探す
詳細な説明を別ページへ整理しました。以前の見出しに対応する説明へ，次のリンクから進めます。
| 項目 | 案内 |
|---|---|
| 1. ヘッダーにNavbar Proを配置する | 詳しい説明 |
| 2. ライト・ダーク用のロゴを登録する | 詳しい説明 |
| 3. メニューのリンクを入力する | 詳しい説明 |
| 現在ページの強調 | 詳しい説明 |
| プレビューと公開URL | 詳しい説明 |
| 4. 言語リンクを設定する | 詳しい説明 |
| 5. ハンバーガーへ切り替える幅を選ぶ | 詳しい説明 |
| 6. 明暗とスクロールの動作を設定する | 詳しい説明 |
| 7. 写真に重ねる表示を設定する | 詳しい説明 |
| 8. 内側の幅を調整する | 詳しい説明 |
| Logo | 詳しい説明 |
| Colors | 詳しい説明 |
| Menu | 詳しい説明 |
| Behavior | 詳しい説明 |
| Overlay | 詳しい説明 |
| 添付ファイルの確認 | 詳しい説明 |
| 公開前の確認 | 詳しい説明 |
| 困ったとき | 詳しい説明 |