@manufosela/nav-list NPM

\<nav-list>

@manufosela/nav-list is a Lit-Element webcomponent to draw a horizontal navigation list

Demo

<h3>Default nav-list demo</h3>
<nav-list></nav-list>

<h3>With attributes nav-list demo</h3>
<nav-list selected="7">
  <ul>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
</nav-list>

<h3>With attributes nav-list demo</h3>
<nav-list selected="5&ndash;10">
  <ul>
    <li>&lt;3</li>
    <li>3&ndash;5</li>
    <li>5&ndash;10</li>
    <li>&gt;10</li>
  </ul>
</nav-list>

Attributes

[title] (String)
[selected] (String)
[fixed] (Boolean) (false by default)
[listen-events] (Boolean) (false by default)

Listen Events

navlist-last
navlist-next

(detail.id is mandatory)

Dispatch Events

navlist-changed (when new value is set)

CSS vars

    --width-list-element: auto;
    --height-list-element: auto;
    --border-radius-element: 0;
    --border-radius-selected-element: 0;
    --border-top-list-element: 2px solid transparent;
    --border-bottom-list-element: 2px solid transparent;
    --border-left-list-element: 2px solid transparent;
    --border-right-list-element: 2px solid transparent;
    --border-top-selected-element: 2px solid #cc3743;
    --border-bottom-selected-element: 2px solid #cc3743;
    --border-left-selected-element: 2px solid #cc3743;
    --border-right-selected-element: 2px solid #cc3743;
    --padding-list-element: 10px 20px;
    --padding-selected-element: 10px 13px;