Navigation

< Context / Components

Navigation

Introduction

A list of links laid out in a row.

Body

ariaLabel

-text

A descriptive name for the navigation, used for screen reader accessibility.

pipe

-booleen

Whether to show a pipe | between each link.

options

An array of list items

  • href

    -url

    Destination of the link

  • text

    -text

    Text used in the link.

Style

navigation

navigation.hover

pipe

Example .json

  {
    "type":"navigation",
    "body":{
      "ariaLabel":"Rebelmail site navigation",
      "pipe":true,
      "options":[
        {
          "href":"https://www.rebelmail.com",
          "text":"Home"
        },
        {
          "href":"http://blog.rebelmail.com/",
          "text":"Blog"
        }
      ]
    },
    "style":{
      "navigation":{
        "background": {
          "color": "#fff"
        },
        "border": {
          "color": "#333",
          "width": "1",
          "style": "solid",
          "radius": "10"
        },
        "padding": {
          "top": "10",
          "right": "20",
          "bottom": "10",
          "left": "20"
        },
        "font": {
          "color": "#f69513",
          "decoration": "none",
          "family": "Arial, Helvetica, sans-serif",
          "style": "",
          "weight": "bold",
          "size": "16",
          "align": ""
        },
        "hover":{
          "background": {
            "color": "#f69513"
          },
          "border": {
            "color": "",
            "width": "",
            "style": "",
            "radius": ""
          },
          "padding": {
            "top": "",
            "right": "",
            "bottom": "",
            "left": ""
          },
          "font": {
            "color": "#ffffff",
            "decoration": "underline",
            "family": "",
            "style": "",
            "weight": "",
            "size": "",
            "align": ""
          }
        },
        "pipe":{
          "font": {
            "color": "#cccccc",
            "family": "Arial, Helvetica, sans-serif",
            "weight": "",
            "size": "16"
          }
        }
      }
    }
  }