検索

メニュー

ドロワー 概要

スクリーンショット:モバイルメニューで構成されるドロワーの3つの展開パターン。

ブラウザ画面の四辺(上下左右端)から展開し、モバイルメニューなどのコンポーネントを格納可能なコンテナです。

仕様

ハンバーガーメニューボタンのような起点となるコンポーネントによって開閉が制御されます。展開パターンとして、全面オーバーレイ、右・左タイプのオーバーレイを用意しています。

  • ドロワーは必ずモードを持ちます(モーダル)。
  • ドロワーにはエレベーションが設定され、親要素はオーバーレイシェードで覆われます。ドロワー内部に配置されたコンテンツやリンク以外にはアクセスできません。
  • 「閉じる」ボタンの押下によりドロワーを閉じることができます。

各種リソース

種別 リソース 状態
デザイン Figmaデザインデータ(v2) 提供中
HTML版実装 ソースコード(GitHub) 提供中
サンプル(Storybook) 提供中
React版実装 ソースコード(GitHub) 提供中
サンプル(Storybook) 提供中