Responsive Navbar with Dropdown

Based on the TailwindCSS Playground

A responsive navbar with dropdowns using AlpineJS and Heroicons build in the TailwindCSS Playground

The Tailwind Config got extended by the following line to include system colorscheme support

screens: {
    'dark-mode': {'raw': '(prefers-color-scheme: dark)'},
},

This enables the dark-mode variant which you can use to declare classes for the dark mode of your browser / os. It is possible to chain variants for example dark-mode and hover:

<div class="block h-64 w-64 bg-gray-100 dark-mode:bg-gray-900 hover:bg-gray-200 dark-mode:hover:bg-gray-800"></div>

Features

• Fully Responsive
• Prefers-Color-Scheme Support
• Side- and Topbar

Changelog

11th of April 2020 - Added Sidebar (./public/sidebar.html) and moved Navbar to seperate file (.public/navbar.html)

09th of April 2020 - Completly redone the Navbar to remove tailwindUI component and to remove duplicate divs

Structure

Navbar: ./public/navbar.html

Sidebar: ./public/sidebar.html

Preview

https://responsive-navbar-with-dropdown.netlify.com/

To get started:

1. Clone the repository:

   git clone https://github.com/jan-heise/responsive-navbar-with-dropdown responsive-navbar-with-dropdown
   
   cd responsive-navbar-with-dropdown
   

Instructions from the official TailwindCSS Playground Repo

2. Install the dependencies:

   # Using npm
   npm install
   
   # Using Yarn
   yarn
   

3. Start the development server:

   # Using npm
   npm run serve
   
   # Using Yarn
   yarn run serve
   

   Now you should be able to see the project running at localhost:8080.

4. Open public/index.html in your editor and start experimenting!

Building for production

Even though this isn't necessarily a starter kit for a proper project, we've included an example of setting up both Purgecss and cssnano to optimize your CSS for production.

To build an optimized version of your CSS, simply run:

# Using npm
npm run production

# Using Yarn
yarn run production

After that's done, check out ./public/build/tailwind.css to see the optimized output.

Build with

• TailwindCSS and the Tailwind Playground
• AlpineJS
• Heroicons