Notes

Üç Büyücü Turnuvası

This library was developed as part of the Üç Büyücü Turnuvası hackathon. Our destination is to learn how to open source licences,use the github pages,write test for ui component and npm package the vue component and publish it. The library, besides being simple, entertained us a lot during development and taught us a lot. Thank You.

Trello Board and Roadmap

Trello Board

vue-dropdown-breadcrumb

A breadcrumb library with dropdown option

Links

Demo

View on npm

View on GitHub

Install

Download

# npm
npm i vue-dropdown-breadcrumb

About

A simple breadcrumb library.In addition to working as a breadcrumb, it also enables sub-categories to be listed as dropdown. We just need to change the isDropdown parameter of the general categories whose subcategories we want to show and pass the link list.In this way, users can easily switch between categories. Css can be easily edited by you. We used magic words from Harry Potter series at the beginning of our commits to fit the hackathon concept :)

Usage Example

<template>
  <vue-dropdown-breadcrumb :links="links" />
</template>
<script>
import vueDropdownBreadcrumb from 'vue-dropdown-breadcrumb'
export default {
  name: 'app',
  data () {
    return {
      links: [
        {
          label: "Ana Sayfa",
          link: "https://dementor.com",
          isDropdown: false,
          list: null,
        },
        {
          label: "Telefon ve Aksesuarlar",
          link: "https://dementor.com/telefon-aksesuarlar",
          isDropdown: false,
          list: null,
        },
        {
          label: "Cep Telefonları",
          isDropdown: true,
          link: "https://dementor.com/telefon-aksesuarlar",
          list: [
            {
              label: "Android Telefonlar",
              link: "https://dementor.com/android-telefonlar",
            },
            {
              label: "İphone İOS Telefonlar",
              link: "https://dementor.com/iphone-telefonlar",
            },
            {
              label: "Diğer Telefonlar",
              link: "https://dementor.com/diger-telefonlar",
            },
          ],
        },
        {
          label: "Android Telefonlar",
          isDropdown: false,
          list: null,
        },
      ],
    };
  },
}
</script>

Props

prop	type	required	default	description
label	String	yes		String to be displayed as label in a tag
link	String	yes		The link to be written as href inside the a tag
isDropdown	Boolean	no	false	It must be true if the breadcrumb item is to be opened as a dropdown and other links will be shown.
list	Array	yes if isDropdown is true	[ ]	Link list for dropdown links

Development

# install dependencies
npm install
# serve with hot reload
npm run watch
# run the tests
npm run test
# build demo page
npm run build:example
# build library
npm run build:library
# build everything and run tests
npm run build

Contribute

As we mentioned above, we have a Trello board.You can contribute according to the issues there. You can add your ideas to the board. Have fun!

License

MIT