コンテンツへスキップ

ドロップダウン付きダッシュボードナビバー

ナビゲーションバー · Pro ソース

ビューポート全体に広がるのではなく、枠付きカードとして浮遊するログイン後のアプリケーションバーだ。4つの行き先のうち2つはドロップダウンパネルを開く——Analyticsはアイコンと1行の説明を添えた4行のリスト、Productsはカバーアート付きの2枚のカードパネルとなっており、どちらも共通のナビゲーションメニュープリミティブによって動作するため、マウスではホバーで、それ以外の利用者はEnterキーやタップで開く。lg未満ではロゴの左にあるハンバーガーの裏にすべてが折りたたまれ、2つのパネルはインラインのアコーディオンになる。

ライブプレビューを開くNeobrutalism Pro を入手
ナビゲーションバー
Neobrutalist React and Tailwind dashboard navbar rendered as a white card with a black border and hard shadow: the Nexus logo and wordmark on the left, Dashboard, Analytics, Products and Settings links in the middle, and a moon toggle, a bell with an unread dot and a round avatar on the right.
ドロップダウン付きダッシュボードナビバー
  • Hero・料金・認証
  • すべてのブレークポイントをプレビューする
  • ソースをコピーする
  • MCP インストール準備完了
  • Radix · Base UI · React Aria
  • 158 既製のブロック
  • 出荷されるページセクション
  • ダッシュボードとマーケティング
  • Pro コードのロックを解除する
  • ドロップインレイアウト
プレビュー無料全画面で開き、ブレークポイントまたはテーマを切り替える。コードPro1つの独立した TSX ファイル。コピーして、所有してください。インストールProshadcn CLI のコマンド一つ、または Claude Code・Cursor などの MCP クライアント向けプロンプト。

組み込まれ

さらに lucide-react アイコンと Tailwind CSS — 他のランタイム依存関係なし。

他の ナビゲーションバー レイアウト（7）

すべて表示

https://neobrutalism.com/ja/blocks/navbar/dashboard-navbar-with-dropdowns

大好き。 開発者にもデザイナーにも、
クリエイターにも。

  • たまたま UI キットを見つけて即ゲット。新しくて活発にメンテされ、どんどん改善されてるのが最高。すごい仕事だ！🤘

    Ziv Reich, ソフトウェア開発者

  • neobrutalism.com、ほんとよくできてるって言いたかっただけ。すごく気に入ってる。デザインが苦手だから、これは本当に助かった。自分の個人サイトで使わせてもらったよ。

    Paul Bratslavsky, Coding With Paul 運営

  • ようやく Neobrutalism.com で個人サイトを作り直した。楽しいライブラリで、始めやすい！

    Cameron Blackwood, コンテンツクリエイター

  • Neobrutalism.com はお気に入りのレトロ系 UI コンポーネントライブラリのひとつ。ちゃんと ship できるコンポーネント。

    Zhengyang Hou, インディーハッカー

  • Web で一番好きな UI ライブラリのひとつ。いい仕事してる。これからもっともっと伸びていくといいな。

    Taseen Tanvir, 創業者 & デザイナー

  • Neobrutalism.com Pro を試したけど、他とかぶらない UI キットで新鮮。ネオブルータリズムのブロック 🔥 で変なレイアウトの試作がずっと速くなった。

    Nitesh Padghan, ゴーストライター

  • バランスと流れが完璧な、美しいランディングページデザイン。カラーパレットとアニメーションが組み合わさり、卓越したUXを生み出しています。

    Alan Obeng-Peprah, Senior Designer @ NativeXAI

  • 納品されたデザインに本当に感心しました。最終成果物は想像していたものとぴったり一致していました。

    Desmond, 共同創業者 @ VectorlabsVentures

  • 代理店オーナーとして、クライアントのランディングレイアウトを磨き込むのに通常は数週間かかります。Neobrutalism.comならテンプレートを差し込み、コピーを整えればすぐに出荷できます。

    Duke Opoku Amankwah, 創業者 @ Midas

  • テンプレートは見た目が優れているだけでなく、構造も非常によくできています。開発期間を何週間も短縮できました。

    Abiola Braimah, 開発者 @ Studio IX

  • 品質が突出していて細部へのこだわりもすごい。レスポンシブデザインはすべてのデバイスで完璧に動作します。

    Acromond X., 共同創業者 @ VectorlabsVentures

  • これらのテンプレートをワークフローに組み込んだことで、開発サイクルが大幅に短縮されました。素晴らしい仕事です。

    Raquib S., バックエンド開発者

  • これらのテンプレートは私たちの定番リソースになりました。コードはクリーンでドキュメントも充実しており、カスタマイズも容易です。

    Hallic M., 開発者 @ AtlasLabs

  • Neobrutalism.comのテンプレートは美観と機能性の完璧なバランスを取っています。私たちのプロジェクトにとって本当のゲームチェンジャーです。

    Ibrahim S., Frontend Lead @ ScaleUp

  • サポートが優れ、テンプレートの品質もプレミアム。これらのテンプレートのROIは驚異的です。

    Kevin K., CEO @ WebCraft

  • Neobrutalism.comのテンプレートは、新規クライアント案件への取り組み方を完全に変えました。コード品質は傑出しており、デザインもまさにワールドクラスです。

    Danny G., DevStack創業者

  • 多くのテンプレートライブラリを使ってきましたが、Neobrutalism.comはパフォーマンス最適化とクリーンなコードアーキテクチャへのこだわりで際立っています。

    Ian D., WavelengthのCTO

  • これらのテンプレートのアニメーションとマイクロインタラクションは本当に素晴らしい。デザインチームにとって最高の投資です。

    Ben S., PixelPerfectのリードデザイナー

  • 技術職ではない創業者として、Neobrutalism.comのテンプレートのおかげでデザイン品質を犠牲にせずMVPを記録的な速さでローンチできました。投資家も驚いていました。

    Matthew I., スタートアップ創業者

  • これらのコンポーネントがどれだけモジュール化され、ドキュメント化されているかを高く評価しています。異なるテンプレートの部品をスムーズに組み合わせられました。

    Garrett P., TechFusionのフロントエンドリード

  • Neobrutalism.comテンプレートのROIは信じられないほどです。開発時間を大幅に削減しつつ、より高品質なサイトをクライアントに届けています。

    Xavier C., 代理店オーナー

よくある
質問

ドロップダウン付きダッシュボードナビバー ブロックの構成方法、変更できる内容、他のレイアウトの代わりに使用する場合について。

アクセスがブロックされている問題ですか？メールでお問い合わせください[email protected]
Get Pro — Save 33%--:--:--