vue3-dropdown-navbar
v0.1.4
Published
The package implements dropdown navbar, it based on Tailwind CSS.
Downloads
221
Readme
vue3-dropdown-navbar
English｜繁體中文
The package implements dropdown navbar, it based on Tailwind CSS.
Demo
Install
$ npm install vue3-dropdown-navbarUsage
<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.
Style CSP(Content Security Policy) Description
If your website has set CSP, you need to add the following settings:
<meta property="csp-nonce" content="<your-nonce>" />The automatically injected style tag will add the nonce attribute.