# Navigation Link

## Some elements in a menu

```js
const [active, setActive] = React.useState(2);
const helper = (i) => ({ active: active === i, onClick: () => setActive(i) });

<>
  <SilkeBox column>
    <SilkeNavigationLink label="Search" {...helper(0)} icon="search" />
    <SilkeNavigationLink label="Home" {...helper(1)} icon="dashboard" />
    <SilkeNavigationLink
      label="Initially active item"
      icon="tooltip"
      {...helper(2)}
      iconRight="delete"
    />
    <SilkeNavigationLink label="Item 3" {...helper(3)} icon="account" />
  </SilkeBox>
</>;
```

## Darker background

```jsx
() => {
  const [active, setActive] = React.useState(2);
  const helper = (i) => ({ active: active === i, onClick: () => setActive(i) });
  const menu = ipsum.list(4, () => ({ label: ipsum.name() }));

  return (
    <SilkeBox column bg="ui-background">
      <SilkeNavigationLink label="Item 0" {...helper(0)} icon="user">
        <SilkeButton icon="add" />
      </SilkeNavigationLink>
      <SilkeNavigationLink label="Item 1" {...helper(1)} icon="users" />
      <SilkeNavigationLink label="Initially active item" icon="tooltip" {...helper(2)}>
        <SilkeButton icon="delete" />
      </SilkeNavigationLink>
      <SilkeNavigationLink label="Item 3" {...helper(3)} icon="account">
        <SilkeOverflowMenu items={menu} />
      </SilkeNavigationLink>
    </SilkeBox>
  );
};
```

## Draggable version

```jsx
() => {
  const [active, setActive] = React.useState(2);
  const helper = (i) => ({ active: active === i, onClick: () => setActive(i) });
  const menu = ipsum.list(4, () => ({ label: ipsum.name() }));

  return (
    <SilkeBox column bg="ui-background">
      <SilkeNavigationLink draggable label="Item 0" {...helper(0)} icon="user">
        <SilkeButton icon="add" />
      </SilkeNavigationLink>
      <SilkeNavigationLink draggable label="Item 1" {...helper(1)} icon="users" />
      <SilkeNavigationLink draggable label="Initially active item" icon="tooltip" {...helper(2)}>
        <SilkeButton icon="delete" />
      </SilkeNavigationLink>
      <SilkeNavigationLink draggable label="Item 3" {...helper(3)} icon="account">
        <SilkeOverflowMenu draggable items={menu} />
      </SilkeNavigationLink>
    </SilkeBox>
  );
};
```