Getting Started

navr has not achieved CRAN status yet, so for now we will install with devtools::install_github as shown in the code below.

devtools::install_github("timelyportfolio/navr")

Simple Example

library(navr)
library(htmltools)

# navr loves htmltools::tags, and I do too
#   so let's use them

tagList(
  tags$div(
    id = "simple-toolbar"
    ,style="width:100%;height:300px;border: dashed 0.2em lightgray; float:left;"
    ,tags$h1( "Div in Need of Toolbar" )
    ,tags$p( "If all goes well, you should see something that resembles a toolbar.
      This toolbar is built in R using the htmlwidget "
      , tags$a(tags$code("navr"),href = "https://github.com/timelyportfolio/navr")
      ," which wraps the tiny, dependency-free powerhouse "
      ,tags$a(tags$code("responsive-nav.js"),href = "//responsive-nav.com/")
      ,".  Isn't open source great?"
    )
  )
  ,navr(
    "#simple-toolbar"  # id of selector for the div above
    ,tagList(
      tags$ul(
        tags$li(tags$a("worthless1"),href="")  # for now just text
        ,tags$li(tags$a("worthless2"),href="") # for now just text
      )
    )
  )
)

htmlwidget Example

I can imagine a scenario where one of our htmlwidget friends might need a toolbar. Let’s say a DiagrammeR diagram wants to add a toolbar for exporting the rendered SVG. We could do something like this.

library(DiagrammeR)

gV <- grViz(
  "digraph{ DiagrammeR -> HTML; navr -> HTML; HTML -> beautiful; }"
  , height = 400, width = 600
)

tagList(
  # wrap diagram in a div since a lot of htmlwidgets clear contents
  tags$div(id = "diagram-needs-toolbar"
    ,gV
  )
  ,navr(
    selector = "#diagram-needs-toolbar"
    # use HTML instead of tags
    ,taglist = HTML("
      <ul>
        <li><a onclick = 'javascript:void(exportSVG())' href = '#diagram-needs-toolbar'>Export to SVG</a></li>
      </ul>
    "
    )
  )
  ,tags$script("
    function exportSVG(){
      window.open(
        [
          'data:;base64,',
          window.btoa((new XMLSerializer()).serializeToString(
              document.getElementById('diagram-needs-toolbar')
                .getElementsByTagName('svg')[0]
          ))
        ].join('')
      )
    }
  ")
)