## Spec for "Navigation" Plugin...

A configurable Navigation widget that can be added to any web page

## Table of Contents​

- [Spec for "Navigation" Plugin...](#spec-for-%22navigation-22-plugin)
- [Table of Contents​](#table-of-contents%e2%80%8b)
- [Workflow](#workflow)
- [User Stories](#user-stories)
- [Screens / States​](#screens--states%e2%80%8b)
- [Test Plan](#test-plan)

## Workflow

(N/A)​

## User Stories

As a user, I can...

- Add Navigation Menu on a page I'm working on.
- Quickly add a list of links I want displayed
- Sort, Reorder the link data
- Configure a unique action for each link
- Group links into sections
- Choose from a variety of link presets
- Establish basic properties for each link and the container
- Fixed to the top or bottom

## Screens / States​

![]()

# Sections Used

- Sortable list of links
- Logo
- Presets
- Position/Padding
- Fixed to top / bottom
- Typography

## Test Plan

| √   | Scenario                                                            | Expected                                                                |
| --- | ------------------------------------------------------------------- | ----------------------------------------------------------------------- |
| √   | When a user opens the [add new] tab                                 | A [navigation Widget] appears                                           |
| √   | When a user drags the navigation widget to the canvas               | A simple Navigation appears                                             |
| √   | When a user clicks the [*] button on the widget                     | The Navigation properties box appears                                   |
| √   | When a user changes the layout (align, position)                    | settings adjust accordingly (both editor & live mode)                   |
| √   | When a user configures the design (font, color, bg, border, shadow) | settings adjust accordingly (both editor & live mode)                   |
| √   | When a user publishes a page with the navigation                    | The destination page shows the navigation as specified on the live page |
| √   | When a user specifies an post action (redirect, popup, tag)         | settings adjust accordingly (both editor & live mode)                   |
| x   | When a user chooses a preset                                        | settings overwrite to the preset settings                               |