CCHub Logo CCHub Tailwind Collection
コンポーネント サイドバーナビゲーション サイドバーナビゲーション

サイドバーナビゲーション

アナログの配色とマイクロインタラクションを備えたレスポンシブサイドバーナビゲーションコンポーネント(ダークテーマのサポートを含む)。

プレビュー

HTMLコード 

<div class="flex h-screen bg-gray-100 dark:bg-gray-800">

    <!-- Sidebar -->
    <div class="w-64 bg-teal-500 dark:bg-teal-700 text-white flex flex-col">
        <div class="p-4 text-center text-2xl font-bold">Dashboard</div>
        <nav class="mt-6">
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Home</a>
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Analytics</a>
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Reports</a>
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Settings</a>
        </nav>
    </div>

    <!-- Content area -->
    <div class="flex-1 p-10 text-gray-800 dark:text-gray-200">
        <h1 class="text-3xl font-bold mb-6">Welcome to the Dashboard</h1>
        <p>This is the main content area.</p>
    </div>

</div>

関連コンポーネント

レトロサイドバーナビゲーション

ビジネス/企業のWebサイト向けのレスポンシブでシンプルなレトロ/ビンテージパステルカラーのサイドバーナビゲーションコンポーネントで、ダークモードがサポートされています。

開ける

遊び心のある教育用サイドバーナビゲーション

教育プラットフォーム向けの複雑で遊び心があり、レスポンシブなサイドバーナビゲーションコンポーネントで、アースカラー、丸みを帯びた要素、ダークモードのサポートが特徴です。ユーザープロファイル、メインナビゲーション、コースの進行状況、クイックリンクが含まれます。

開ける

サイドバーナビゲーションコンポーネント - Memphis Muted (ミュート)

メンフィスのデザインに触発された複雑でレスポンシブなサイドバーナビゲーションコンポーネントで、落ち着いた配色で、ドキュメントやWikiサイトに適しています。ダークモードのサポートとインタラクティブな要素が含まれています。

開ける