@clayui/nav

ClayNav component

Usage no npm install needed!

<script type="module">
  import clayuiNav from 'https://cdn.skypack.dev/@clayui/nav';
</script>

README


title: 'Nav' description: 'Clay Nav provides a clear and semantic navigation for your site' packageNpm: '@clayui/nav'

import {Navigation, VerticalNavigation} from '$packages/clay-nav/docs/index';

Basic Usage

Vertical Navigation

Custom Trigger

In its mobile version, Vertical Navigation adds a trigger that is responsible for opening the menu, in some cases you may want to customize this trigger, for this use the <ClayVerticalNav.Trigger /> component.

<ClayVerticalNav
    trigger={(props) => (
        <ClayVerticalNav.Trigger {...props}>
            <ClayIcon
                focusable="false"
                role="presentation"
                spritemap={spritemap}
                symbol="ellipsis-v"
            />
        </ClayVerticalNav.Trigger>
    )}
/>

Your custom trigger receives the children property with the default content, for cases when you just want to change the Trigger Button and not its content.

<ClayVerticalNav
    trigger={({onClick}) => (
        <button className="btn btn-secondary" onClick={onClick}>
            <ClayIcon
                focusable="false"
                role="presentation"
                spritemap={spritemap}
                symbol="ellipsis-v"
            />
        </button>
    )}
/>