A Dropdown Navbar Built with Vue3 and Tailwind CSS

vue3-dropdown-navbar

The package implements dropdown navbar, it based on Tailwind CSS.

Demo

Install

$ npm install vue3-dropdown-navbar

Usage

<script setup lang="ts">
import {
  TheDropDownNavbar,
  TheDropDownMenu,
  TheDropDownItem,
  TheDropDownDivideBlock,
  TheDropDownNavbarLogo,
} from "vue3-dropdown-navbar";
import { ref } from "vue";

const dropdownMenu = ref<InstanceType<typeof TheDropDownMenu>>();
const toggleDarkMode = () => {
  document.documentElement.classList.toggle("dd-nav-dark");
};
</script>

<template>
  <TheDropDownNavbar>
    <template #logo>
      <TheDropDownNavbarLogo>Vue3 DropDown Navbar</TheDropDownNavbarLogo>
    </template>
    <TheDropDownItem link="/home">Home</TheDropDownItem>
    <TheDropDownMenu text="Dropdown 1" ref="dropdownMenu">
      <TheDropDownItem>Dropdown Item 1</TheDropDownItem>
      <TheDropDownItem>Dropdown Item 2</TheDropDownItem>
      <TheDropDownMenu text="Dropdown Item 3">
        <TheDropDownItem>Dropdown Item 3-1</TheDropDownItem>
        <TheDropDownItem>Dropdown Item 3-2</TheDropDownItem>
      </TheDropDownMenu>
      <TheDropDownDivideBlock>
        <TheDropDownItem>Sign out</TheDropDownItem>
      </TheDropDownDivideBlock>
    </TheDropDownMenu>
    <TheDropDownItem @click="toggleDarkMode">Toggle Dark Mode</TheDropDownItem>
  </TheDropDownNavbar>

  <button
    class="border bg-blue-500 text-white px-4 py-2 rounded-lg"
    @click="dropdownMenu?.openDropdownMenu"
  >
    Open Dropdown Menu
  </button>
</template>

Assume you have not installed TailwindCSS, you may reset the style, can import preflight in main.(js|ts), it provides by Tailwind CSS.

import { createApp } from "vue";
import App from "./App.vue";
// ...

import "vue3-dropdown-navbar/preflight.css"; // <-- Add this

const app = createApp(App);

app.use(router);

app.mount("#app");

Property Description

if the suffix is (?), which is an optional property.

TheDropDownNavbarLogo component available properties: Type | Name | Description | ---------------|-----|---| String | link? | set link. | String | imageUrl? | set image url. | String | alt? | set image alt property. | Boolean | native? | set whether use native (<a>) link. |

TheDropDownMenu component available properties: Type | Name | Description | ---------------|-----|---| String | text | set text for dropdown menu. | Boolean | closeOthers? | set whether close other menus when open this menu. |

TheDropDownItem component available properties: Type | Name | Description | ---------------|-----|---| String | link? | set link. | Boolean | native? | set whether use native (<a>) link. |

Function Description

TheDropDownNavbar component available function: Name | Description | ----------------|----------| closeAllDropdownMenu | close all dropdown menus. |

TheDropDownMenu component available function: Name | Description | ----------------|----------| openDropdownMenu | open this dropdown menu. | closeDropdownMenu | close this dropdown menu. |

Extra Slot Description

TheDropDownNavbar component available slot: Name | Description | ----------------|----------| logo | set navbar left side content, recommand using TheDropDownNavbarLogo component. |

Common Attribute Description

Name	Description
no-close-others	by default, dropdown menu closes when clicking another element, if you want to click a specific element without closing dropdown menu, this can help you.

Example

<button no-close-others>Click Me Without Close Dropdown Menu</button>

Dark Mode

Add dd-nav-dark class to <html> tag.

Download details:

Author: LaiJunBin
Source code: https://github.com/LaiJunBin/vue3-dropdown-navbar

#vue #vuejs #tailwindcss

What is GEEK

Buddha Community

A Dropdown Navbar Built with Vue3 and Tailwind CSS

hourly developer

1596530868

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

Zoltan Szogyenyi

1602955151

Tailwind CSS tutorial

In this tutorial I would like to introduce you to one of the fastest growing and promising CSS Frameworks at the moment, Tailwind CSS. It is different from other frameworks, such as Bootstrap, because it is built on a new way of building user interfaces using a utility-first CSS classes structure, as opposed to the OOCSS structure from other frameworks.

By the end of this guide you will be able to install, configure and build a responsive hero section (live demo) using the utility-first classes from Tailwind CSS and configure the project using the recommended PostCSS powered Tailwind configuration file for better maintainability and versatility.

Here’s the table of contents for this tutorial for Tailwind CSS:

Introducing Tailwind CSS
Adding Tailwind CSS to your project via a package manager
Creating the configuration file and process your CSS with Tailwind
Building a responsive hero section using the utility-first classes from Tailwind
Customize fonts, colors and add extra classes using the configuration file
Reduce loading time and file size by purging the unused classes from your CSS
Conclusion and summary

Read the full tutorial from Themesberg.

#tailwind #tailwind-css #tailwind-css-tutorial #tutorial #open-source

Zoltan Szogyenyi

1604404836

Popular Tailwind CSS Plugins and Extensions - Themesberg Blog

By reading this article you will browse a list of the most popular plugins and extensions for the utility-first CSS framework, Tailwind CSS. Although the default code base of the framework already covers a lot of the needs when building user interfaces, you can never get enough plugins and extensions powered by the open-source community.

One of the requirements for a plugin to appear on this list is to be open-source with no other strings attached so that the developers browsing this list can stay assured that they can use the plugin for their Tailwind CSS powered project.

Check out the list of Tailwind CSS Plugins and Extensions on Themesberg.

#tailwindcss #tailwind #tailwind-css #tailwind-css-plugins #themesberg

Arlo McLaughlin

1607760904

Tailwind CSS Cheatsheet

Master Tailwind CSS with this Cheatsheet.

Tailwind CSS allows us to build modern websites with the respective classes without writing a single native CSS.

Just like other CSS libraries like Bootstrap, Tailwind also has responsive classes that we only need to specify in our application.

This article will get you up and started quickly with Tailwind to make beautiful websites and UIs.

Tailwind is amazing since we have to only to specify the respective classes and Tailwind CSS will take care of everything.

On top of that, we don’t have to worry about responsivity as all is taken care of by Tailwind on different devices.

A utility-first CSS framework packed with classes like flex, pt-4, text-centre and rotate-90 that can be composed to build any design, directly in your markup. From Tailwind.com.

In this article, we will see the most basic CSS classes and their relative properties in CSS.

#tailwind #css #tailwind-css #tailwindcss #web-development

Rylan Becker

1618420560

Tailwind CSS v2.1 is now released

Tailwind v2.1 was just released with a new JIT Engine, Filter and Backdrop-filter Utilities, and more. Let’s take a look at some of the new features.

JIT Engine

A few weeks ago, the Tailwind team released a package they were using to expiriment with a just-in-time compiler for Tailwind. With the release of Tailwind v2.1, the JIT compiler is included in Tailwind core. Just add mode: 'jit' to your Tailwind config file and configure the purge property to scan your markup.

#news #tailwind #tailwind css #tailwind css v2.1