Navbar

Navbar は、ページタイトルとナビゲーション要素を含む画面上部の固定領域です。

Navbar には、Left、Title、Right の 3 つの主要な部分があります。各部分には任意の HTML コンテンツを含めることができますが、次のように使用することをお勧めします。

Left 部分は、「戻るリンク」、アイコン、または単一のテキストリンクで使用するように設計されています。
Title 部分は、ページタイトルまたはタブリンク（ボタン行/セグメント化されたコントローラー）を表示するために使用されます。
Right 部分は、Left 部分と同じ目的で使用します。

Navbar のレイアウトは非常にシンプルでわかりやすいです。

<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">Left</div>
        <div class="title">Page Title</div>
        <div class="right">Right</div>
    </div>
</div>

Navbar の Title 要素は幅の優先度が最も低く、ウィンドウ画面に 3 つの要素すべてが収まらない場合、Title 部分は切り取られることに注意してください。

したがって、Title 部分にプレーンテキストを使用した場合、切り取られると最後に省略記号（...）が表示されます。ただし、カスタム要素がある場合は注意が必要です。

Left または Right 部分にリンクを追加するには、追加の link クラスを持つプレーンな <a> タグを追加するだけです。

<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">Left Link</a>
        </div>
        <div class="title">Page Title</div>
        <div class="right">
            <a href="#" class="link">Right Link</a>
        </div>
    </div>
</div>

複数のリンク

特別なことは何もありません。必要な部分に <a class="link"> をさらに追加するだけです。

<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">Left 1</a>
            <a href="#" class="link">Left 2</a>
        </div>
        <div class="title">Page Title</div>
        <div class="right">
            <a href="#" class="link">Right 1</a>
        </div>
    </div>
</div>

アイコン + テキスト付きのリンク

ここで少し違いがあります。この場合、リンクのテキストを <span> 要素で**ラップする必要があります**。これは、アイコンと「単語」の間の正しい間隔とアニメーションに必要なものです。

<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link back">
                <i class="icon icon-back"></i>
                <span>Back</span>
            </a>
        </div>
        <div class="title">Title</div>
        <div class="right">
            <a href="#" class="link">
                <i class="icon another-icon"></i>
                <span>Menu</span>
            </a>
        </div>
    </div>
</div>

アイコンのみのリンク

アイコン付きでテキストのないリンクが必要な場合は、リンクに追加の icon-only クラスを追加する必要があります。このクラスを使用すると、リンクのサイズが固定されるため、指で誤ってタップすることはありません。

<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link icon-only">
                <i class="icon icon-back"></i>
            </a>
        </div>
        <div class="title">Title</div>
        <div class="right">
            <a href="#" class="link icon-only">
                <i class="icon another-icon"></i>
            </a>
        </div>
    </div>
</div>

この機能は、Framework7 バージョン 5.5.0 以降で使用できます。

透明な Navbar は、透明な背景と透明なタイトルで表示され、ページをスクロールすると不透明になります。透明な Navbar を有効にするには、navbar に navbar-transparent クラスを追加する必要があります。

<!-- additional "navbar-transparent" class -->
<div class="navbar navbar-transparent">
  ...
</div>

大きなタイトル

大きなタイトルの Navbar には、大きなタイトルテキストを持つ追加の「行」（または「バー」）があり、ページをスクロールすると折りたたまれます。大きくするには、navbar に追加の navbar-large クラスを追加し、追加の title-large 要素を追加する必要があります。

<!-- additional "navbar-large" class -->
<div class="navbar navbar-large">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    <div class="left">
      <!-- ... -->
    </div>
    <!-- usual title will be visible when larger title collapsed -->
    <div class="title">My App</div>
    <div class="right">
      <!-- ... -->
    </div>
    <!-- large title element -->
    <div class="title-large">
      <div class="title-large-text">My App</div>
    </div>
  </div>
</div>

大きな透明なタイトル

大きなタイトルの Navbar を「透明」にすることもできます。これを有効にすると、ページのスクロール操作をするまで、Navbar の背景とそのメインタイトルは非表示になります。

大きなタイトルを透明にするには、追加の navbar-transparent クラスが必要です。

<!-- additional "navbar-transparent" class -->
<div class="navbar navbar-large navbar-transparent">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    ...
  </div>
</div>

テーマ固有のスタイリング

ios テーマでは、Navbar の下部に細い境界線があります。この境界線を無効にするには、navbar 要素に no-outline クラスを追加する必要があります。

<div class="navbar no-outline">...</div>

次に、DOM で Navbar を配置できる場所を見てみましょう。Navbar を配置するためのいくつかのルールがあります。

静的 Navbar の位置は、おそらく最もまれに使用されるレイアウトタイプです。この場合、Navbar はスクロール可能なページコンテンツの一部にすぎません。

<div class="page">
  <!-- Scrollable page content -->
  <div class="page-content">
    <!-- Static navbar goes in the beginning inside of page-content -->
    <div class="navbar">...</div>
    ...

  </div>
</div>

固定 Navbar もページの一部ですが、ページスクロールに関係なく、常に画面に表示されます。この場合、ページの直接の子である必要があり、ページに固定ツールバーもある場合は、ツールバーの前に配置する必要があります。

<div class="page">
  <!-- Fixed navbar goes ALWAYS FIRST -->
  <div class="navbar">...</div>
  <!-- Fixed toolbar goes ALWAYS AFTER navbar -->
  <div class="toolbar toolbar-bottom">...</div>

  <!-- Scrollable page content -->
  <div class="page-content">
    ...
  </div>
</div>

固定 Navbar は常にページの直接の子であり、ツールバーの前に配置する必要があります（このページで固定ツールバーが使用されている場合）。

View 内のすべてのページに共通の Navbar が 1 つだけ必要な場合は、このビューの直接の子であり、ビュー内のすべてのページの前に配置する必要があります。

<div class="view">
  <!-- View common navbar -->
  <div class="navbar">...</div>

  <!-- Pages -->
  <div class="page">...</div>
</div>

すべての View に共通の Navbar / Navbar が 1 つだけ必要な場合は、Views 要素の直接の子であり、すべての View の前に配置する必要があります。

<div class="views tabs">
  <!-- Views common navbar -->
  <div class="navbar">...</div>

  <div class="view tab tab-active" id="tab-1">...</div>
  <div class="view tab" id="tab-2">...</div>
  ...
</div>

共通の Navbar は常に Views/View の直接の子であり、ツールバーの前に配置する必要があります（共通のツールバーも使用されている場合）。

iOS テーマの素晴らしい機能の 1 つは、動的な Navbar です。動的 Navbar が有効になっている場合、Navbar の要素はページ遷移中にスライドおよびフェードし、スワイプバック時にスライドします。

Navbar がページの直接の子である「固定配置」の Navbar を使用すると、デフォルトで有効になります。

無効にする場合は、必要な View の初期化時、またはすべての View のグローバルなアプリパラメータで iosDynamicNavbar: false を渡す必要があります。例：

// Disable globally
var app = new Framework7({
  view: {
    iosDynamicNavbar: false,
  },
});

// Disable only for view on its initialisation
var mainView = app.views.create('.view-main', {
  iosDynamicNavbar: false,
});

動的 Navbar (iosDynamicNavbar) が有効になっている場合、Navbar の HTML 要素はページから切り離され、View の HTML 要素の下に移動されることに注意してください。この場合、ページ関連の動的 Navbar 要素にアクセスするには、app.navbar.getElByPage(pageEl) メソッドを使用します。

動的 Navbar のレイアウトは、通常の Navbar と同じです。唯一の違いは、Navbar の各部分（Left、Title、Right）に追加のクラスを追加して、この部分に必要なトランジションエフェクトの種類を指定できることです。

デフォルトでは（追加のクラスがない場合）、各 Navbar 部分には「フェード」トランジションエフェクトがあります。
Navbar の任意の部分に sliding クラスを追加すると、「スライディング」効果が得られます。
navbar-inner に sliding クラスを追加すると、すべての Navbar 部分に「スライディング」効果が適用されます。
見栄えを良くするために、異なるページで同じ Navbar 部分に同じトランジションタイプを使用することをお勧めします。

<!-- No additional classes, all elements will have "fade" effect on page transition -->
<div class="navbar">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    <div class="left">
      <a href="#" class="link">Home Left</a>
    </div>
    <div class="title">Home</div>
    <div class="right">
      <a href="#" class="link">Home Right</a>
    </div>
  </div>
</div>

<!-- Title and Left will have "sliding" effect on page transition -->
<div class="navbar">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    <!-- Additional "sliding" class -->
    <div class="left sliding">
      <a href="#" class="link">Home Left</a>
    </div>
    <!-- Additional "sliding" class -->
    <div class="title sliding">Home</div>
    <div class="right">
      <a href="#" class="link">Home Right</a>
    </div>
  </div>
</div>

<!-- All parts will have "sliding" effect on page transition -->
<div class="navbar">
  <div class="navbar-bg"></div>
  <!-- Additional "sliding" class -->
  <div class="navbar-inner sliding">
    <div class="left">
      <a href="#" class="link">Home Left</a>
    </div>
    <div class="title">Home</div>
    <div class="right">
      <a href="#" class="link">Home Right</a>
    </div>
  </div>
</div>

Navbar で使用可能な次のアプリメソッドを使用できます。

app.navbar.hide(navbarEl, animate, hideStatusbar)	Navbar を非表示にする navbarEl - HTMLElement または string (CSS セレクター付き) 必要な navbar。必須。 animate - Boolean - アニメーション付きで非表示にするかどうか。デフォルトは `true` です。 hideStatusbar - Boolean - `false` (デフォルト) の場合、ステータスバー領域をカバーするために必要なスペースを確保して、navbar を部分的に非表示にします。それ以外の場合、navbar は完全に非表示になります。
app.navbar.show(navbarEl, animate)	Navbar を表示する navbarEl - HTMLElement または string (CSS セレクター付き) 必要な navbar。必須。 animate - Boolean - アニメーション付きで表示するかどうか。デフォルトは `true` です。
app.navbar.size(navbarEl)	Navbar 要素の位置スタイルを再計算します。Navbar 要素を動的に変更した後で役立つ場合があります。 navbarEl - HTMLElement または string (CSS セレクター付き) 必要な navbar。必須。
app.navbar.getElByPage(pageEl)	指定されたページ要素で Navbar の HTML 要素を取得します。動的 Navbar が有効になっている場合にのみ役立ちます。この場合、ページコンテナの外にあります。 pageEl - HTMLElement または string (CSS セレクター付き) Navbar を検索するページ。必須。
app.navbar.getPageByEl(navbarEl)	指定された Navbar 要素でページ HTML 要素を取得します。動的 Navbar が有効になっている場合にのみ役立ちます。この場合、ページコンテナの外にあります。 navbarEl - HTMLElement または string (CSS セレクター付き) 相対ページを検索する Navbar。必須。
app.navbar.collapseLargeTitle(navbarEl)	大きな Navbar タイトルを折りたたむ navbarEl - HTMLElement または string (CSS セレクター付き) 折りたたむ Navbar。必須。
app.navbar.expandLargeTitle(navbarEl)	大きな Navbar タイトルを展開する navbarEl - HTMLElement または string (CSS セレクター付き) 展開する Navbar。必須。
app.navbar.toggleLargeTitle(navbarEl)	大きな Navbar タイトルを切り替える navbarEl - HTMLElement または string (CSS セレクター付き) 切り替える (折りたたみまたは展開) Navbar。必須。

navbar パラメータの下に Navbar 関連のパラメータを渡すことにより、グローバルなアプリパラメータを使用して、いくつかのデフォルトの Navbar 動作を制御できます。

パラメータ	タイプ	デフォルト	説明
hideOnPageScroll	boolean	false	ページスクロール時に Navbar を非表示にします。
showOnPageScrollEnd	boolean	true	スクロールがページの最後に到達したときに非表示の Navbar を表示するには、`true` に設定します。
showOnPageScrollTop	boolean	true	`false` に設定すると、ページを常に一番上までスクロールしても、非表示の Navbar は表示されません。ページの一番上、つまりページの開始時にのみ表示されます。
scrollTopOnTitleClick	boolean	true	有効にすると、Navbar のタイトル要素をクリックするたびに、関連するページが一番上までスクロールします。
iosCenterTitle	boolean	true	有効にすると、iOS テーマでタイトルを中央に配置しようとします。カスタムデザインによっては、必要ない場合があります。
mdCenterTitle	boolean	false	有効にすると、MD テーマでタイトルを中央に配置しようとします。カスタムデザインによっては、必要ない場合があります。
collapseLargeTitleOnScroll	boolean	true	有効にすると、ページを一番上までスクロールしたときに大きなタイトルが折りたたまれ、ページの一番上で再び展開されます。
snapPageScrollToLargeTitle	boolean	true	有効にすると、ページスクロールが大きなタイトルの折りたたみ/展開位置にスナップするため、ページスクロールが大きなタイトルの位置の途中で止まることがなくなります。`collapseLargeTitleOnScroll` が有効な場合にのみ効果があります。
snapPageScrollToTransparentNavbar	boolean	true	有効にすると、ページスクロールが透明なナビゲーションバーのサイズにスナップするため、ページスクロールが透明なナビゲーションバーの位置の途中で止まることがなくなります。

例

var app = new Framework7({
  navbar: {
    hideOnPageScroll: true,
    iosCenterTitle: false,
  },
});

Framework7では、特定のページまたは特定のページスクロールで追加のクラスを使用して、ナビゲーションバーを非表示/表示できます。

特定のページでページスクロール時にナビゲーションバーを非表示にする場合は、そのページの <div class="page-content"> 要素に追加のクラスを使用してください。

hide-bars-on-scroll - ページスクロール時にナビゲーションバーとツールバーの両方を非表示にします
hide-navbar-on-scroll - ページスクロール時にナビゲーションバーを非表示にします

特定のページでこの動作を無効にするには、以下の追加クラスを使用できます。

keep-bars-on-scroll - ページスクロール時にナビゲーションバーとツールバーを保持します
keep-navbar-on-scroll - ページスクロール時にナビゲーションバーを保持します

例

<div class="page">
  <div class="navbar">
    ...
  </div>
  <!-- "hide-navbar-on-scroll" class to hide Navbar -->
  <div class="page-content hide-navbar-on-scroll">
    <div class="block">
      <p>Scroll page down</p>
      ...
    </div>
  </div>
</div>

アプリのすべてのページ/ビューで共通の単一のナビゲーションバーを使用している場合は、必要ない一部のページでナビゲーションバーを自動的に非表示/表示できます。

これを機能させるには、ロードされたページに no-navbar クラスを追加するだけです（<div class="page no-navbar">）。

<!-- Page has additional "no-navbar" class -->
<div class="page no-navbar">
  <div class="page-content">
      ...
  </div>
</div>

ナビゲーションバーは、ナビゲーションバー要素（<div class="navbar">）で以下のDOMイベントを発行し、アプリインスタンスでアプリイベントを発行します。

DOMイベント

イベント	ターゲット	説明
navbar:hide	ナビゲーションバー <div class="navbar">	ナビゲーションバーが非表示になるとトリガーされるイベント
navbar:show	ナビゲーションバー <div class="navbar">	ナビゲーションバーが表示されるとトリガーされるイベント
navbar:collapse	ナビゲーションバー <div class="navbar">	大きなタイトルのナビゲーションバーが折りたたまれたとき（大きなナビゲーションバーから通常のナビゲーションバーになったとき）にトリガーされるイベント
navbar:expand	ナビゲーションバー <div class="navbar">	大きなタイトルのナビゲーションバーが展開されたとき（通常のナビゲーションバーから大きなナビゲーションバーになったとき）にトリガーされるイベント

アプリイベント

イベント	引数	説明
navbarHide	(el)	ナビゲーションバーが非表示になるとトリガーされるイベント
navbarShow	(el)	ナビゲーションバーが表示されるとトリガーされるイベント
navbarCollapse	(el)	大きなタイトルのナビゲーションバーが折りたたまれたとき（大きなナビゲーションバーから通常のナビゲーションバーになったとき）にトリガーされるイベント
navbarExpand	(el)	大きなタイトルのナビゲーションバーが展開されたとき（通常のナビゲーションバーから大きなナビゲーションバーになったとき）にトリガーされるイベント

CSS 変数

以下は、関連するCSS変数（CSSカスタムプロパティ）のリストです。

コメント付きの変数はデフォルトでは指定されておらず、その値はこの場合のフォールバック先であることに注意してください。

:root {
  /*
  --f7-navbar-bg-color: var(--f7-bars-bg-color);
  --f7-navbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  --f7-navbar-border-color: var(--f7-bars-border-color);
  */
  --f7-navbar-hide-show-transition-duration: 400ms;
  --f7-navbar-title-line-height: 1.2;
  --f7-navbar-subtitle-text-align: inherit;
  --f7-navbar-large-title-line-height: 1.2;
  --f7-navbar-large-title-text-color: inherit;
  --f7-navbar-large-title-padding-left: 16px;
  --f7-navbar-large-title-padding-right: 16px;
}
.ios {
  /*
  --f7-navbar-link-color: var(--f7-bars-link-color);
  --f7-navbar-text-color: var(--f7-bars-text-color);
  */
  --f7-navbar-height: 44px;
  --f7-navbar-font-size: 17px;
  --f7-navbar-title-font-size: inherit;
  --f7-navbar-inner-padding-left: 8px;
  --f7-navbar-inner-padding-right: 8px;
  --f7-navbar-title-font-weight: 600;
  --f7-navbar-title-margin-left: 0;
  --f7-navbar-title-margin-right: 0;
  --f7-navbar-title-text-align: center;
  --f7-navbar-subtitle-font-size: 10px;
  --f7-navbar-subtitle-line-height: 1;
  --f7-navbar-large-title-height: 52px;
  --f7-navbar-large-title-font-size: 34px;
  --f7-navbar-large-title-font-weight: 700;
  --f7-navbar-large-title-letter-spacing: -0.03em;
  --f7-navbar-large-title-padding-vertical: 6px;
  /*
  --f7-navbar-link-height: var(--f7-navbar-height);
  --f7-navbar-link-line-height: var(--f7-navbar-height);
  */
  --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.55);
}
.ios .dark,
.ios.dark {
  --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-navbar-height: 64px;
  --f7-navbar-font-size: 16px;
  --f7-navbar-title-font-size: 22px;
  --f7-navbar-inner-padding-left: 0px;
  --f7-navbar-inner-padding-right: 0px;
  --f7-navbar-title-font-weight: 400;
  --f7-navbar-title-margin-left: 0px;
  --f7-navbar-title-margin-right: 16px;
  --f7-navbar-title-text-align: left;
  --f7-navbar-subtitle-font-size: 14px;
  --f7-navbar-subtitle-line-height: 1.2;
  --f7-navbar-large-title-font-size: 28px;
  --f7-navbar-large-title-height: 88px;
  --f7-navbar-large-title-font-weight: 400;
  --f7-navbar-large-title-letter-spacing: 0;
  --f7-navbar-large-title-padding-vertical: 8px;
  --f7-navbar-link-height: 48px;
  --f7-navbar-link-line-height: 48px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-navbar-link-color: var(--f7-md-on-surface);
  --f7-navbar-text-color: var(--f7-md-on-surface);
  --f7-navbar-subtitle-text-color: var(--f7-md-on-surface-variant);
}

例

navbar-static.f7.html

<div class="page no-navbar">
  <div class="page-content">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Static Navbar</div>
        <div class="right"></div>
      </div>
    </div>
    <div class="block">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
        qui,
        alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
        similique!</p>
      <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
        vero
        porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
    </div>
  </div>
</div>

navbar-fixed.f7.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Fixed Navbar</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
        qui,
        alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
        similique!</p>
      <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
        vero
        porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
        qui,
        alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
        similique!</p>
      <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
        vero
        porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
    </div>
  </div>
</div>

navbar-transparent.f7.html

<div class="page">
  <div class="navbar navbar-transparent">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Transparent Navbar</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
        qui,
        alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
        similique!</p>
      <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
        vero
        porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
        qui,
        alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
        similique!</p>
      <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
        vero
        porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
    </div>
  </div>
</div>

大きなタイトル

navbar-large.f7.html

<div class="page">
  <div class="navbar navbar-large">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Large Title</div>
      <div class="title-large">
        <div class="title-large-text">Large Title</div>
      </div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
        qui,
        alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
        similique!</p>
      <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
        vero
        porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
        qui,
        alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
        similique!</p>
      <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
        vero
        porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
    </div>
  </div>
</div>

大きな透明

navbar-large-transparent.f7.html

<div class="page">
  <div class="navbar navbar-large navbar-transparent">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Large Transparent</div>
      <div class="title-large">
        <div class="title-large-text">Large Transparent</div>
      </div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
        qui,
        alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
        similique!</p>
      <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
        vero
        porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
        qui,
        alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
        similique!</p>
      <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
        vero
        porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
    </div>
  </div>
</div>

navbar-api.f7.html

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Navbar API</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p><a class="button button-raised button-fill" @click=${hideNavbar}>Hide Navbar</a></p>
        <p><a class="button button-raised button-fill" @click=${showNavbar}>Show Navbar</a></p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
          vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
          eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
          qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
          vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
          eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $on, $f7 }) => {
    let navbarEl;
    const hideNavbar = () => {
      $f7.navbar.hide(navbarEl);
    }
    const showNavbar = () => {
      $f7.navbar.show(navbarEl);
    }
    $on('pageInit', (e, page) => {
      navbarEl = $f7.navbar.getElByPage(page);
    });

    return $render;
  }
</script>

スクロール時に非表示

navbar-hide-on-scroll.f7.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Hide On Scroll</div>
    </div>
  </div>
  <div class="page-content hide-navbar-on-scroll">
    <div class="block">
      <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
        vero
        porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab,
        qui,
        alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
        similique!</p>
      <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
        vero
        porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
      <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut
        eveniet
        ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
      <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
        possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
        Sunt, ad aliquam!</p>
      <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
        consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
        reprehenderit!</p>
    </div>
  </div>
</div>

Navbar

Navbar の HTML レイアウト

リンク付き Navbar

複数のリンク

アイコン + テキスト付きのリンク

アイコンのみのリンク

透明な Navbar

大きなタイトル

大きな透明なタイトル

テーマ固有のスタイリング

Navbar タイプ

静的 Navbar タイプ

固定 Navbar タイプ

共通 Navbar タイプ

動的 Navbar

動的 Navbar レイアウト

Navbar アプリメソッド

Navbar アプリパラメータ

ページクラスによるナビゲーションバーの制御

ナビゲーションバーイベント

DOMイベント

アプリイベント

CSS 変数

例

静的なナビゲーションバー

固定されたナビゲーションバー

透明な Navbar

大きなタイトル

大きな透明

ナビゲーションバーAPI

スクロール時に非表示