@minna-ui/navbar
    TypeScript icon, indicating that this package has built-in type declarations

    0.36.0 • Public • Published

    NPM version NPM bundle size (minified + gzip) Licence

    @minna-ui/navbar

    A simple navbar menu web component. It can be used standalone, in Svelte projects, or any JavaScript project.

    TODO: Write note about @minna-ui/css interplay/dependency.

    TODO: Example image.

    TODO: Add link to demo and documentation page.

    Usage

    Standalone

    The easiest way to use the component is to add the CDN hosted version directly in your HTML.

    TIP: If you're already using a JavaScript bundler you should follow the the "Other JavaScript projects" instructions.

    1. Add the CSS and JS to your document, inside the <head></head>:

       <link href="https://cdn.jsdelivr.net/npm/@minna-ui/navbar/dist/index.css" rel="stylesheet"/>
       
       <script src="https://cdn.jsdelivr.net/npm/@minna-ui/navbar"></script> 

      Or use a specific version:

       <link href="https://cdn.jsdelivr.net/npm/@minna-ui/navbar@0.5.0/dist/index.css" rel="stylesheet"/>
       
       <script src="https://cdn.jsdelivr.net/npm/@minna-ui/navbar@0.5.0"></script> 
    2. Add an element where you want the component to show in your document <body></body>:

      <div id="minna-navbar"></div>
    3. Initialise the component:

      <script>
        new MinnaNavbar({
          target: document.querySelector('#minna-navbar'),
          data: {},
        });
      </script> 

    Svelte projects

    Because this is actually a Svelte component, using it in your Svelte projects is simple and allows for the most flexibility and best possible performance.

    1. Install the package:

      yarn add @minna-ui/navbar
    2. Add to your Svelte component:

      MySvelteComponent.svelte:

      <MinnaNavbar />
       
      <script>
        import MinnaNavbar from '@minna-ui/navbar';
       
        export default {
          components: {
            MinnaNavbar,
          },
        };
      </script> 

    Other JavaScript projects

    This component can also be used alongside any JavaScript project, regardless of your framework of choice, by using ES6 modules import.

    1. Install the package:

      yarn add @minna-ui/navbar
    2. Add to your files:

      my-example.html:

      <div id="minna-navbar"></div>

      my-example.js:

      import MinnaNavbar from '@minna-ui/navbar';
       
      new MinnaNavbar({
        data: {},
        target: document.querySelector('#minna-navbar'),
      });

    Licence

    @minna-ui/navbar is part of Minna UI, an Apache-2.0 licensed open source project. See LICENCE.


    © 2020 We Are Genki

    Install

    npm i @minna-ui/navbar

    DownloadsWeekly Downloads

    151

    Version

    0.36.0

    License

    Apache-2.0

    Unpacked Size

    205 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar