# Navigation

### Dots

Slides use navigation dots to help your site visitors jump to different sections and pages in your website. In Slides, these nav dots are generated by js code automatically inside `<ul>` tags, so you don’t need to create them yourself. The number of dots depends on the number of slides you’ve included, as long as the code shown below exists:

```html
<nav class="side">
  <div class="navigation default">
    <ul></ul>
  </div>
</nav>
```

### Numbers <a href="#navigation-numbers" id="navigation-numbers"></a>

You can also use Numbers as a style for your navigation by adding `numbers` on the `navigation` element.

```html
<nav class="side">
  <div class="navigation numbers">
    <ul></ul>
  </div>
</nav>
```

### Position <a href="#navigation-position" id="navigation-position"></a>

By default, dots appear on the right side of a web page. You can move them to the left by adding a class `left` on your `side` element.

```html
<nav class="side left">
  <div class="navigation default">
    <ul></ul>
  </div>
</nav>
```

### Size <a href="#navigation-size" id="navigation-size"></a>

You have the option to choose between default, `medium` and `small`.

```html
<nav class="side medium">
  <div class="navigation default">
    <ul></ul>
  </div>
</nav>
```

### Style <a href="#navigation-style" id="navigation-style"></a>

You have the option to choose between circle (default) dots, `square`, `diamond`, `line`, and `pole` shaped dots. To change the appearance of unselected dots to an outline look, add the class `stroke` in your code, however, it will work on only default, square, and diamond ones:

```html
<nav class="side square stroke">
  <div class="navigation default">
    <ul></ul>
  </div>
</nav>
```

### Horizontal <a href="#navigation-horizontal" id="navigation-horizontal"></a>

For horizontal slides, you might want to add your navigation dots inside a panel on your page. This will work fine as long as you include a `<div class="navigation default"><ul></ul></div>`. Wrap the `navigation` element with any tag to control the size, shape, and stroke, as shown here:

```html
<nav class="panel bottom">
  <div class="sections">
    <div class="center">
      <nav class="medium diamond stroke">
        <div class="navigation default"><ul></ul></div>
      </nav>
    </div>
  </div>
</nav>
```

### Tooltip <a href="#tooltip" id="tooltip"></a>

You can add tooltips on hover on navigation dots simply by adding `data-title="Tooltip Name"` on your slides.

```html
<section class="slide" data-title="Tooltip Name">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <!-- Slide contents -->

      </div>
    </div>
  </div>
</section>
```

### Compact View <a href="#compact-view" id="compact-view"></a>

If you have so many slides on your page that all the nav dots won’t fit on a side panel, the slides.js script will automatically set your side element appearance to a Compact view. You can also change your navigation by default to `compact` by adding a compact class:

```html
<nav class="side compact">
  <div class="navigation default">
    <ul></ul>
  </div>
</nav>
```

## Navigation Classes <a href="#navigation-classes" id="navigation-classes"></a>

You might need to use navigation controls (next and previous buttons) for your slides. To do that, use the class `nextSlide` and `prevSlide` on any element you want:

```html
<div class="nextSlide">Next</div>
<div class="prevSlide">Back</div>
<div class="toFirstSlide">Start</div>
<div class="toLastSlide">End</div>
<div class="toSlide-5">Slide 5</div>
```

## Exclude from Navigation <a href="#navigation-exclude" id="navigation-exclude"></a>

You can exclude some slides from navigation by adding `exclude` class on your slide element.

```html
<!-- Slide will be shown but ignored from side menu navigation -->
<section class="slide exclude">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <!-- Slide contents -->

      </div>
    </div>
  </div>
</section>
```

You can assign excluded slides to a parent slide to group them together. Add attribute `data-slide-id="unique-id"` to a parent slide element and `data-parent-slide-id="unique-id"` to link them together.

```html
<!-- Parent slide -->
<section class="slide" data-slide-id="unique-id">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <!-- Slide contents -->

      </div>
    </div>
  </div>
</section>

<!-- Excluded from navigation -->
<section class="slide exclude" data-parent-slide-id="unique-id">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <!-- Slide contents -->

      </div>
    </div>
  </div>
</section>
```

[Example](https://designmodo.com/slides/app/preview/example/navigation-skip-slides/#slide1).

## Turn off the arrow keys navigation <a href="#disable-key-navigation" id="disable-key-navigation"></a>

You can disable the default arrow keys navigation with the following JS parameter:

```html
<script>
  window.disableKeyNavigation = 1;
</script>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://slides.gitbook.io/manual/navigation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.