ナビゲーション v1.0.0

ナビゲーションバー

モバイルハンバーガーメニュー、ダークモード対応、 オプションのスティッキースクロール動作を備えたレスポンシブなナビゲーションバー。

シンプル

左にロゴ、中央にリンク、右にCTAを配置したクラシックなナビゲーションバー

オプション

名前 型 デフォルト 説明
logo_text * String 必須 Brand/logo text displayed in the navbar
logo_href String "/" URL the logo links to
links Array Array of hashes with :label (String), :href (String), :active (Boolean)
cta_label String Call-to-action button text
cta_href String Call-to-action button URL
sticky Boolean false Whether the navbar sticks to the top on scroll with shadow

中央揃え

ロゴを上部中央、リンクをその下に配置した中央揃えレイアウト

オプション

名前 型 デフォルト 説明
logo_text * String 必須 Brand/logo text displayed in the navbar
logo_href String "/" URL the logo links to
links Array Array of hashes with :label, :href, :active keys
cta_label String Call-to-action button text
cta_href String Call-to-action button URL
sticky Boolean false Whether the navbar sticks to the top on scroll

変更履歴 v1.0.0

- v1.0.0: Initial release with simple, with-search, and centered styles

フルアクセスを取得

このコンポーネントと他のすべてのソースコードをアンロックしましょう。一回のお支払いで永久アクセス。

今すぐアクセスを取得