@allakando/allakando-web-ui/dist/storybook/assets/navigation.stories-1c048ef7.js

Allakando's web component library

import"./DialogManager-abca015e.js";import{i as a}from"./StyleInjection-7d750a8d.js";const l=`# Navigation

Allakando's design system nav element styling can be imported using navigation.css.

After applying the stylesheets you can create navigation menus.

- To use horizontal menus place a ul element inside of a nav element. The list item elements will space themselves evenly
- To use vertical menus place the nav element inside of an aside element.
- To use a breadcrumb list, set aria-label="breadcrumb" on the nav element`,o={title:"Style Injection/Navigation",component:"Navigation",tags:["autodocs"],parameters:{docs:{description:{component:l}}}},n=()=>(window.AllakandoWebUI={injectStyle:a},`
        <script>
            AllakandoWebUI.injectStyle({
                navigation: true
            })
        <\/script>

        <div style="background:lightgray;width:100%;">
            <nav>
                <ul>
                    <li>Left Item</li>
                </ul>
                <ul>
                    <li>Right Item 1</li>
                    <li>Right Item 2</li>
                    <li>Right Item 3</li>
                </ul>
            </nav>
        </div>
        <br /><br />
        <div style="background:lightgray;width:100%;">
            <aside>
                <nav>
                    <ul>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                    </ul>
                </nav>
            </aside>
        </div>
        <br />
        <div style="background:white;width:100%;">
            <nav aria-label="breadcrumb">
                <ul>
                    <li><span>Item 1</span></li>
                    <li><span>Item 2</span></li>
                    <li><span>Item 3</span></li>
                </ul>
            </nav>
        </div>
    `);var e,i,t;n.parameters={...n.parameters,docs:{...(e=n.parameters)==null?void 0:e.docs,source:{originalSource:`() => {
  window.AllakandoWebUI = {
    injectStyle
  };
  return \`
        <script>
            AllakandoWebUI.injectStyle({
                navigation: true
            })
        <\/script>

        <div style="background:lightgray;width:100%;">
            <nav>
                <ul>
                    <li>Left Item</li>
                </ul>
                <ul>
                    <li>Right Item 1</li>
                    <li>Right Item 2</li>
                    <li>Right Item 3</li>
                </ul>
            </nav>
        </div>
        <br /><br />
        <div style="background:lightgray;width:100%;">
            <aside>
                <nav>
                    <ul>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                    </ul>
                </nav>
            </aside>
        </div>
        <br />
        <div style="background:white;width:100%;">
            <nav aria-label="breadcrumb">
                <ul>
                    <li><span>Item 1</span></li>
                    <li><span>Item 2</span></li>
                    <li><span>Item 3</span></li>
                </ul>
            </nav>
        </div>
    \`;
}`,...(t=(i=n.parameters)==null?void 0:i.docs)==null?void 0:t.source}}};const d=["Template"];export{n as Template,d as __namedExportsOrder,o as default};