diff --git a/NAMESPACE b/NAMESPACE
index 04287eb1..543161ec 100644
--- a/NAMESPACE
+++ b/NAMESPACE
@@ -34,6 +34,7 @@ export(grid)
 export(grid_template)
 export(header)
 export(hide_modal)
+export(hide_tab)
 export(horizontal_menu)
 export(icon)
 export(incProgress)
@@ -50,6 +51,8 @@ export(modal)
 export(modalDialog)
 export(multiple_checkbox)
 export(multiple_radio)
+export(navbar_menu)
+export(navbar_page)
 export(numericInput)
 export(numeric_input)
 export(progress)
@@ -75,6 +78,7 @@ export(shiny_input)
 export(shiny_text_input)
 export(showNotification)
 export(show_modal)
+export(show_tab)
 export(sidebar_layout)
 export(sidebar_panel)
 export(single_step)
@@ -83,6 +87,7 @@ export(slider_input)
 export(splitLayout)
 export(split_layout)
 export(steps)
+export(tab_panel)
 export(tabset)
 export(textAreaInput)
 export(textInput)
diff --git a/R/dsl.R b/R/dsl.R
index a2ba1e64..4fcef761 100644
--- a/R/dsl.R
+++ b/R/dsl.R
@@ -182,7 +182,7 @@ tabset <- function(tabs,
   active_tab <- if (!is.null(active)) active else valid_ids[1] # nolint
   shiny::tagList(
     shiny::div(id = id,
-               class = paste("ui menu sem", menu_class),
+               class = paste("ui menu ss-menu", menu_class),
                purrr::map(id_tabs, ~ {
                  class <- paste("item", if (.$id == active_tab) "active" else "") # nolint
                  shiny::a(class = class, `data-tab` = .$id, .$menu)
diff --git a/R/navbarPage.R b/R/navbarPage.R
new file mode 100644
index 00000000..af462c8f
--- /dev/null
+++ b/R/navbarPage.R
@@ -0,0 +1,299 @@
+#' Semantic UI page with top level navigation bar
+#'
+#' @description
+#' This creates a Semantic page for use in a Shiny app. It is in the same layout as \code{\link[shiny]{navbarPage}},
+#' where a top level navigation bar exists.
+#'
+#' @details
+#' Inside, it uses two crucial options:
+#'
+#' (1) \code{shiny.minified} with a logical value, tells whether it should attach min or full
+#' semantic css or js (TRUE by default).
+#' (2) \code{shiny.custom.semantic} if this option has not NULL character \code{semanticPage}
+#' takes dependencies from custom css and js files specified in this path
+#' (NULL by default). Depending on \code{shiny.minified} value the folder should contain
+#' either "min" or standard version. The folder should contain: \code{semantic.css} and
+#' \code{semantic.js} files, or \code{semantic.min.css} and \code{semantic.min.js}
+#' in \code{shiny.minified = TRUE} mode.
+#'
+#' @param ... Other arguments to be added as attributes of the main div tag wrapper (e.g. style, class etc.)
+#' @param title A title to display in the navbar.
+#' @param id ID of the navbar menu. Given random ID if none specified.
+#' @param selected Which tab should be selected first? If none selected, will automatically have the first tab open.
+#' @param position Determines the location and behaviour of the navbar. Padding will be included when pinned to prevent
+#' overlap.
+#' \itemize{
+#' \item{""}{Default. Top of page, and goes out of view when scrolling}
+#' \item{"top fixed"}{Top of page, pinned when scrolling}
+#' \item{"bottom fixed"}{Bottom of page, pinned when scrolling}
+#' }
+#' @param head Optional list of tags to be added to \code{tags$head}.
+#' @param header Optional list of tags to be added to the top of all \code{tab_panel}s.
+#' @param footer Optional list of tags to be added to the bottom of all \code{tab_panel}s.
+#' @param collapsible \code{TRUE} to automatically collapse the navigation elements into a menu when the width of the
+#' browser is less than 768 pixels (useful for viewing on smaller touchscreen device)
+#' @param window_title A title to display in the browser's title bar. By default it will be the same as the navbar
+#' title.
+#' @param class Additional classes to be given to the navbar menu. Defaults to \code{"stackable"}. For optional classes
+#' have a look in details
+#' @param theme Theme name or path. Full list of supported themes you will find in
+#' \code{SUPPORTED_THEMES} or at https://semantic-ui-forest.com/themes.
+#' @param enable_hash_state boolean flag that enables a different hash in the URL for each tab, and creates historical
+#' events
+#' @param suppress_bootstrap boolean flag that suppresses bootstrap when turned on
+#'
+#' @return
+#' A \code{shiny.tag.list} containing the UI for a shiny application.
+#'
+#' @details
+#' The following classes can be applied to the navbar:
+#' \itemize{
+#' \item{\code{stackable}} - When the width of the webpage becomes too thin, for example on mobile, the navbar will
+#' become a stack
+#' \item{\code{inverted}} - Will create an inverted coloured navbar
+#' }
+#'
+#' @examples
+#' navbar_page(
+#'   title = "App Title",
+#'   tab_panel("Plot"),
+#'   tab_panel("Summary"),
+#'   tab_panel("Table")
+#' )
+#'
+#' navbar_page(
+#'   title = "App Title",
+#'   tab_panel("Plot"),
+#'   tab_panel("Icon", icon = "r project"),
+#'   navbar_menu(
+#'     "More",
+#'     tab_panel("Summary"),
+#'     "----",
+#'     "Section header",
+#'     tab_panel("Table")
+#'   )
+#' )
+#'
+#' @export
+navbar_page <- function(..., title = "", id = NULL, selected = NULL,
+                        position = c("", "top fixed", "bottom fixed"),
+                        head = NULL, header = NULL, footer = NULL,
+                        collapsible = FALSE, window_title = title,
+                        class = "stackable", theme = NULL,
+                        enable_hash_state = TRUE, suppress_bootstrap = TRUE) {
+  tabs <- list(...)
+  if (!length(tabs)) stop("No tabs detected")
+  position <- match.arg(position)
+
+  # Padding depending on the position
+  body_padding <- switch(position, "top fixed" = "padding-top: 40px;", "bottom fixed" = "padding-bottom: 40px;", "")
+  if (is.null(selected)) selected <- get_first_tab(tabs)
+  if (is.null(id)) id <- generate_random_id("navbar_menu")
+
+  if (collapsible) {
+    collapse_icon <- tags$button(
+      class = "ui basic icon button collapsed-hamburger-icon",
+      tags$i(class = "hamburger icon")
+    )
+  } else {
+    collapse_icon <- NULL
+  }
+
+  menu_items <- c(
+    list(div(class = "item", title, collapse_icon)),
+    lapply(tabs, navbar_menu_creator, selected = selected)
+  )
+
+  menu_header <- tags$nav(
+    div(
+      class = paste("ui menu ss-menu navbar-page-menu", position, class),
+      id = id,
+      `data-hash-history` = tolower(as.character(enable_hash_state)),
+      menu_items
+    )
+  )
+
+  menu_content <- lapply(tabs, navbar_content_creator, selected = selected)
+
+  semanticPage(
+    tags$head(
+      if (enable_hash_state) tags$script(src = "shiny.semantic/shared/history/history.min.js"),
+      head
+    ),
+    menu_header,
+    div(style = body_padding, tags$header(header), tags$main(menu_content), tags$footer(footer)),
+    title = window_title, theme = theme, suppress_bootstrap = suppress_bootstrap, margin = 0
+  )
+}
+
+navbar_menu_creator <- function(tab, selected = NULL) {
+  if (inherits(tab, "ssnavmenu")) {
+    nav_menu <- dropdown_menu(
+      id = tab$id,
+      name = tab$title,
+      tags$i(class = "dropdown icon"),
+      div(class = "menu", lapply(tab$tabs, navbar_menu_creator, selected = selected)),
+      is_menu_item = TRUE,
+      class = "navbar-collapsible-item"
+    )
+    nav_menu[[1]]$attribs$`data-tab` = tab$id
+    nav_menu
+  } else if (is.character(tab)) {
+    if (grepl("^(-|_){4,}$", tab)) menu_divider() else div(class = "header", tab)
+  } else {
+    title <- tab$attribs$`data-title`
+    icon <- tab$attribs$`data-icon`
+    tab_id <- tab$attribs$`data-tab`
+    class <- paste0(if (identical(title, selected)) "active " else "", "item")
+
+    tags$a(
+      class = paste("navbar-collapsible-item", class),
+      `data-tab` = tab_id,
+      if (!is.null(icon)) tags$i(class = paste(icon, "icon")),
+      if (!(!is.null(icon) && title == "")) title
+    )
+  }
+}
+
+navbar_content_creator <- function(tab, selected = NULL) {
+  if (inherits(tab, "ssnavmenu")) {
+    tagList(lapply(tab$tabs, navbar_content_creator, selected = selected))
+  } else if (is.character(tab)) {
+    NULL
+  } else {
+    title <- tab$attribs$`data-title`
+
+    if (identical(title, selected)) {
+      tab$attribs$class <- paste(tab$attribs$class, "active")
+    }
+    tab
+  }
+}
+
+get_first_tab <- function(tabs, i = 1) {
+  if (inherits(tabs[[i]], "ssnavmenu")) {
+    get_first_tab(tabs[[i]]$tabs, i)
+  } else if (is.character(tabs[[i]])) {
+    get_first_tab(tabs, i + 1)
+  } else {
+    tabs[[i]]$attribs$`data-title`
+  }
+}
+
+#' Navbar Menu
+#'
+#' @description
+#' Create a dropdown menu for a \code{\link{navbar_page}}.
+#'
+#' @param title Display title for menu
+#' @param ... \code{\link{tab_panel}} elements to include in the page. Can also include strings as section headers,
+#' or "----" as a horizontal separator.
+#' @param id The ID of the \code{navbar_menu}
+#' @param icon Optional icon to appear on the tab.
+#' This attribute is only valid when using a \code{tab_panel} within a \code{\link{navbar_page}}.
+#'
+#' @return
+#' A structured list of class \code{ssnavmenu}, that can be used in \code{\link{navbar_page}}.
+#'
+#' @examples
+#' navbar_menu(
+#'   "Menu",
+#'   tab_panel("Summary", shiny::plotOutput("plot")),
+#'   "----",
+#'   "Section header",
+#'   tab_panel("Table", shiny::tableOutput("table"))
+#' )
+#'
+#' @export
+navbar_menu <- function(title, ..., id = title, icon = NULL) {
+  structure(
+    list(title = title, id = id, tabs = list(...), icon = icon),
+    class = "ssnavmenu"
+  )
+}
+
+#' Tab Panel
+#'
+#' @description
+#' Create a tab panel
+#'
+#' @param title Display title for tab
+#' @param ... UI elements to include within the tab
+#' @param value The value that should be sent when \code{\link{navbar_menu}} reports that this tab is selected.
+#' If omitted and \code{\link{navbar_menu}} has an id, then the title will be used.
+#' @param icon Optional icon to appear on the tab.
+#' This attribute is only valid when using a \code{tab_panel} within a \code{\link{navbar_page}}.
+#' @param type Change depending what type of tab is wanted. Default is \code{bottom attached segment}.
+#'
+#' @return
+#' A tab that can be passed to \code{\link{navbar_menu}}.
+#'
+#' @seealso \code{\link{navbar_menu}}
+#'
+#' @examples
+#' navbar_menu(
+#'   tab_panel("Plot", shiny::plotOutput("plot")),
+#'   tab_panel("Summary", shiny::verbatimTextOutput("summary")),
+#'   tab_panel("Table", shiny::tableOutput("table"))
+#' )
+#'
+#' @export
+tab_panel <- function(title, ..., value = title, icon = NULL, type = "bottom attached segment") {
+  shiny::div(
+    class = paste("ui tab", type),
+    `data-title` = title, `data-tab` = value, `data-icon` = icon,
+    ...
+  )
+}
+
+#' Show/Hide Tab
+#'
+#' @description
+#' Dynamically show or hide a \code{\link{tab_panel}} or \code{navbar_menu}
+#'
+#' @param session The \code{session} object passed to function given to \code{shinyServer}.
+#' @param id The id of the navbar object
+#' @param target The tab value to toggle visibility
+#'
+#' @return
+#' Changes to the visibility of a tab in the shiny UI.
+#'
+#' @examples
+#' if (interactive()) {
+#'   library(shiny)
+#'   library(shiny.semantic)
+#'
+#'   ui <- navbar_page(
+#'     title = "App Title",
+#'     id = "navbar",
+#'     tab_panel(
+#'       "Plot",
+#'       action_button("hide", "Hide Table"),
+#'       action_button("show", "Show Table"),
+#'       value = "plot"
+#'     ),
+#'     tab_panel("Summary", value = "summary"),
+#'     tab_panel("Table", value = "table")
+#'   )
+#'
+#'   server <- function(input, output, session) {
+#'     observeEvent(input$hide, hide_tab(session, "navbar", "table"))
+#'     observeEvent(input$show, show_tab(session, "navbar", "table"))
+#'   }
+#'
+#'   shinyApp(ui, server)
+#' }
+#'
+#' @rdname tab_visibility
+#' @export
+show_tab <- function(session = shiny::getDefaultReactiveDomain(), id, target) {
+  menu_id <- session$ns(id)
+  session$sendCustomMessage("toggleSemanticNavbarTab", list(id = menu_id, target = target, toggle = "show"))
+}
+
+#' @rdname tab_visibility
+#' @export
+hide_tab <- function(session = shiny::getDefaultReactiveDomain(), id, target) {
+  menu_id <- session$ns(id)
+  session$sendCustomMessage("toggleSemanticNavbarTab", list(id = menu_id, target = target, toggle = "hide"))
+}
diff --git a/R/semanticPage.R b/R/semanticPage.R
index 8500cdb2..d6deac5f 100644
--- a/R/semanticPage.R
+++ b/R/semanticPage.R
@@ -159,6 +159,8 @@ semanticPage <- function(..., title = "", theme = NULL, suppress_bootstrap = TRU
       get_dependencies(theme),
       shiny::tags$title(title),
       shiny::tags$meta(name = "viewport", content = "width=device-width, initial-scale=1.0"),
+      shiny::tags$link(rel = "stylesheet", type = "text/css", href = "shiny.semantic/shiny-semantic.css"),
+      shiny::tags$script(src = "shiny.semantic/shiny-semantic.js"),
       shiny::tags$link(rel = "stylesheet", type = "text/css",
                        href = "shiny.semantic/shiny-semantic-DT.css"),
       shiny::tags$script(src = "shiny.semantic/shiny-semantic-modal.js"),
diff --git a/examples/navbar_page/app.R b/examples/navbar_page/app.R
new file mode 100644
index 00000000..5140da96
--- /dev/null
+++ b/examples/navbar_page/app.R
@@ -0,0 +1,57 @@
+library(shiny)
+library(shiny.semantic)
+
+ui <- navbar_page(
+  title = "Hello Shiny Semantic!",
+  id = "page_navbar",
+  collapsible = TRUE,
+
+  tab_panel(
+    title = "Content",
+    value = "content",
+    form(multiple_radio("toggle", "Show Menu Dropdown", c("Yes", "No"), c("show", "hide"), "show"))
+  ),
+  tab_panel(
+    title = "Icon",
+    value = "icon",
+    icon = "r project",
+    "A tab with an icon in the menu",
+  ),
+  tab_panel(
+    title = "A Very Long Tab Name",
+    value = "long_tab_name",
+    "Example of a tab name which is very long",
+    tags$br(),
+  ),
+  navbar_menu(
+    "Menu",
+    "Section 1",
+    tab_panel(
+      title = "Part 1",
+      value = "sec1_part1",
+    ),
+    "----",
+    "Section 2",
+    tab_panel(
+      title = "Part 1",
+      value = "sec2_part1",
+      h3("Section 2 - Part 1")
+    ),
+    tab_panel(
+      title = "Part 2",
+      value = "sec2_part2"
+    )
+  )
+)
+
+server <- function(input, output, session) {
+  observeEvent(input$toggle, {
+    if (input$toggle == "hide") {
+      hide_tab(session, "page_navbar", target = "Menu")
+    } else {
+      show_tab(session, "page_navbar", target = "Menu")
+    }
+  }, ignoreInit = TRUE)
+}
+
+shinyApp(ui, server)
diff --git a/inst/www/shared/history/history.min.js b/inst/www/shared/history/history.min.js
new file mode 100644
index 00000000..9d71f1bf
--- /dev/null
+++ b/inst/www/shared/history/history.min.js
@@ -0,0 +1 @@
+!function(a){a.address=function(){var x,W,b=function(b){var c=a.extend(a.Event(b),function(){for(var b={},c=a.address.parameterNames(),d=0,e=c.length;e>d;d++)b[c[d]]=a.address.parameter(c[d]);return{value:a.address.value(),path:a.address.path(),pathNames:a.address.pathNames(),parameterNames:c,parameters:b,queryString:a.address.queryString()}}.call(a.address));return a(a.address).trigger(c),c},c=function(a){return Array.prototype.slice.call(a)},d=function(){return a().bind.apply(a(a.address),Array.prototype.slice.call(arguments)),a.address},e=function(){return a().unbind.apply(a(a.address),Array.prototype.slice.call(arguments)),a.address},f=function(){return P.pushState&&I.state!==x},g=function(){return("/"+Q.pathname.replace(new RegExp(I.state),"")+Q.search+(h()?"#"+h():"")).replace(T,"/")},h=function(){var a=Q.href.indexOf("#");return-1!=a?Q.href.substr(a+1):""},i=function(){return f()?g():h()},j=function(){try{return top.document!==x&&top.document.title!==x?top:window}catch(a){return window}},k=function(){return"javascript"},l=function(a){return a=a.toString(),(I.strict&&"/"!=a.substr(0,1)?"/":"")+a},m=function(a,b){return parseInt(a.css(b),10)},n=function(){if(!_){var a=i(),b=decodeURI(eb)!=decodeURI(a);b&&(M&&7>K?Q.reload():(M&&!V&&I.history&&S(q,50),eb=a,o(H)))}},o=function(a){return"null"!==I.tracker&&I.tracker!==y&&S(p,10),b(D).isDefaultPrevented()||b(a?E:F).isDefaultPrevented()},p=function(){if("null"!==I.tracker&&I.tracker!==y){var b=a.isFunction(I.tracker)?I.tracker:N[I.tracker],c=(Q.pathname+Q.search+(a.address&&!f()?a.address.value():"")).replace(/\/\//,"/").replace(/^\/$/,"");a.isFunction(b)?b(c):a.isFunction(N.urchinTracker)?N.urchinTracker(c):N.pageTracker!==x&&a.isFunction(N.pageTracker._trackPageview)?N.pageTracker._trackPageview(c):N._gaq!==x&&a.isFunction(N._gaq.push)&&N._gaq.push(["_trackPageview",decodeURI(c)])}},q=function(){var a=k()+":"+H+";document.open();document.writeln('<html><head><title>"+O.title.replace(/\'/g,"\\'")+"</title><script>var "+z+' = "'+encodeURIComponent(i()).replace(/\'/g,"\\'")+(O.domain!=Q.hostname?'";document.domain="'+O.domain:"")+'";</'+"script></head></html>');document.close();";7>K?W.src=a:W.contentWindow.location.replace(a)},r=function(){if(Y&&-1!=Z){var a,b,c=Y.substr(Z+1).split("&");for(a=0;a<c.length;a++)b=c[a].split("="),/^(autoUpdate|history|strict|wrap)$/.test(b[0])&&(I[b[0]]=isNaN(b[1])?/^(true|yes)$/i.test(b[1]):0!==parseInt(b[1],10)),/^(state|tracker)$/.test(b[0])&&(I[b[0]]=b[1]);Y=y}eb=i()},s=function(){if(!ab){if(ab=G,r(),a('a[rel*="address:"]').address(),I.wrap){var c=a("body");a("body > *").wrapAll('<div style="padding:'+(m(c,"marginTop")+m(c,"paddingTop"))+"px "+(m(c,"marginRight")+m(c,"paddingRight"))+"px "+(m(c,"marginBottom")+m(c,"paddingBottom"))+"px "+(m(c,"marginLeft")+m(c,"paddingLeft"))+'px;" />').parent().wrap('<div id="'+z+'" style="height:100%;overflow:auto;position:relative;'+(L&&!window.statusbar.visible?"resize:both;":"")+'" />'),a("html, body").css({height:"100%",margin:0,padding:0,overflow:"hidden"}),L&&a('<style type="text/css" />').appendTo("head").text("#"+z+"::-webkit-resizer { background-color: #fff; }")}if(M&&!V){var e=O.getElementsByTagName("frameset")[0];W=O.createElement((e?"":"i")+"frame"),W.src=k()+":"+H,e?(e.insertAdjacentElement("beforeEnd",W),e[e.cols?"cols":"rows"]+=",0",W.noResize=G,W.frameBorder=W.frameSpacing=0):(W.style.display="none",W.style.width=W.style.height=0,W.tabIndex=-1,O.body.insertAdjacentElement("afterBegin",W)),S(function(){a(W).bind("load",function(){var a=W.contentWindow;eb=a[z]!==x?a[z]:"",eb!=i()&&(o(H),Q.hash=eb)}),W.contentWindow[z]===x&&q()},50)}S(function(){b("init"),o(H)},1),f()||(M&&K>7||!M&&V?N.addEventListener?N.addEventListener(B,n,H):N.attachEvent&&N.attachEvent("on"+B,n):R(n,50)),"state"in window.history&&a(window).trigger("popstate")}},t=function(){decodeURI(eb)!=decodeURI(i())&&(eb=i(),o(H))},u=function(){N.removeEventListener?N.removeEventListener(B,n,H):N.detachEvent&&N.detachEvent("on"+B,n)},v=function(a){a=a.toLowerCase();var b=/(chrome)[ \/]([\w.]+)/.exec(a)||/(webkit)[ \/]([\w.]+)/.exec(a)||/(opera)(?:.*version|)[ \/]([\w.]+)/.exec(a)||/(msie) ([\w.]+)/.exec(a)||a.indexOf("compatible")<0&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},w=function(){var a={},b=v(navigator.userAgent);return b.browser&&(a[b.browser]=!0,a.version=b.version),a.chrome?a.webkit=!0:a.webkit&&(a.safari=!0),a},y=null,z="jQueryAddress",A="string",B="hashchange",C="init",D="change",E="internalChange",F="externalChange",G=!0,H=!1,I={autoUpdate:G,history:G,strict:G,wrap:H},J=w(),K=parseFloat(J.version),L=J.webkit||J.safari,M=J.msie,N=j(),O=N.document,P=N.history,Q=N.location,R=setInterval,S=setTimeout,T=/\/{2,9}/g,U=navigator.userAgent,V="on"+B in N,Y=a("script:last").attr("src"),Z=Y?Y.indexOf("?"):-1,$=O.title,_=H,ab=H,bb=G,cb=H,eb=i();if(M){K=parseFloat(U.substr(U.indexOf("MSIE")+4)),O.documentMode&&O.documentMode!=K&&(K=8!=O.documentMode?7:8);var fb=O.onpropertychange;O.onpropertychange=function(){fb&&fb.call(O),O.title!=$&&-1!=O.title.indexOf("#"+i())&&(O.title=$)}}if(P.navigationMode&&(P.navigationMode="compatible"),"complete"==document.readyState)var gb=setInterval(function(){a.address&&(s(),clearInterval(gb))},50);else r(),a(s);return a(window).bind("popstate",t).bind("unload",u),{bind:function(){return d.apply(this,c(arguments))},unbind:function(){return e.apply(this,c(arguments))},init:function(){return d.apply(this,[C].concat(c(arguments)))},change:function(){return d.apply(this,[D].concat(c(arguments)))},internalChange:function(){return d.apply(this,[E].concat(c(arguments)))},externalChange:function(){return d.apply(this,[F].concat(c(arguments)))},baseURL:function(){var a=Q.href;return-1!=a.indexOf("#")&&(a=a.substr(0,a.indexOf("#"))),/\/$/.test(a)&&(a=a.substr(0,a.length-1)),a},autoUpdate:function(a){return a!==x?(I.autoUpdate=a,this):I.autoUpdate},history:function(a){return a!==x?(I.history=a,this):I.history},state:function(a){if(a!==x){I.state=a;var b=g();return I.state!==x&&(P.pushState?"/#/"==b.substr(0,3)&&Q.replace(I.state.replace(/^\/$/,"")+b.substr(2)):"/"!=b&&b.replace(/^\/#/,"")!=h()&&S(function(){Q.replace(I.state.replace(/^\/$/,"")+"/#"+b)},1)),this}return I.state},strict:function(a){return a!==x?(I.strict=a,this):I.strict},tracker:function(a){return a!==x?(I.tracker=a,this):I.tracker},wrap:function(a){return a!==x?(I.wrap=a,this):I.wrap},update:function(){return cb=G,this.value(eb),cb=H,this},title:function(a){return a!==x?(S(function(){$=O.title=a,bb&&W&&W.contentWindow&&W.contentWindow.document&&(W.contentWindow.document.title=a,bb=H)},50),this):O.title},value:function(a){if(a!==x){if(a=l(a),"/"==a&&(a=""),eb==a&&!cb)return;if(eb=a,I.autoUpdate||cb){if(o(G))return this;f()?P[I.history?"pushState":"replaceState"]({},"",I.state.replace(/\/$/,"")+(""===eb?"/":eb)):(_=G,L?I.history?Q.hash="#"+eb:Q.replace("#"+eb):eb!=i()&&(I.history?Q.hash="#"+eb:Q.replace("#"+eb)),M&&!V&&I.history&&S(q,50),L?S(function(){_=H},1):_=H)}return this}return l(eb)},path:function(a){if(a!==x){var b=this.queryString(),c=this.hash();return this.value(a+(b?"?"+b:"")+(c?"#"+c:"")),this}return l(eb).split("#")[0].split("?")[0]},pathNames:function(){var a=this.path(),b=a.replace(T,"/").split("/");return("/"==a.substr(0,1)||0===a.length)&&b.splice(0,1),"/"==a.substr(a.length-1,1)&&b.splice(b.length-1,1),b},queryString:function(a){if(a!==x){var b=this.hash();return this.value(this.path()+(a?"?"+a:"")+(b?"#"+b:"")),this}var c=eb.split("?");return c.slice(1,c.length).join("?").split("#")[0]},parameter:function(b,c,d){var e,f;if(c!==x){var g=this.parameterNames();for(f=[],c=c===x||c===y?"":c.toString(),e=0;e<g.length;e++){var h=g[e],i=this.parameter(h);typeof i==A&&(i=[i]),h==b&&(i=c===y||""===c?[]:d?i.concat([c]):[c]);for(var j=0;j<i.length;j++)f.push(h+"="+i[j])}return-1==a.inArray(b,g)&&c!==y&&""!==c&&f.push(b+"="+c),this.queryString(f.join("&")),this}if(c=this.queryString()){var k=[];for(f=c.split("&"),e=0;e<f.length;e++){var l=f[e].split("=");l[0]==b&&k.push(l.slice(1).join("="))}if(0!==k.length)return 1!=k.length?k:k[0]}},parameterNames:function(){var b=this.queryString(),c=[];if(b&&-1!=b.indexOf("="))for(var d=b.split("&"),e=0;e<d.length;e++){var f=d[e].split("=")[0];-1==a.inArray(f,c)&&c.push(f)}return c},hash:function(a){if(a!==x)return this.value(eb.split("#")[0]+(a?"#"+a:"")),this;var b=eb.split("#");return b.slice(1,b.length).join("#")}}}(),a.fn.address=function(b){return this.data("address")||this.on("click",function(c){if(c.shiftKey||c.ctrlKey||c.metaKey||2==c.which)return!0;var d=c.currentTarget;if(a(d).is("a")){c.preventDefault();var e=b?b.call(d):/address:/.test(a(d).attr("rel"))?a(d).attr("rel").split("address:")[1].split(" ")[0]:void 0===a.address.state()||/^\/?$/.test(a.address.state())?a(d).attr("href").replace(/^(#\!?|\.)/,""):a(d).attr("href").replace(new RegExp("^(.*"+a.address.state()+"|\\.)"),"");a.address.value(e)}}).on("submit",function(c){var d=c.currentTarget;if(a(d).is("form")){c.preventDefault();var e=a(d).attr("action"),f=b?b.call(d):(-1!=e.indexOf("?")?e.replace(/&$/,""):e+"?")+a(d).serialize();a.address.value(f)}}).data("address",!0),this}}(jQuery);
diff --git a/inst/www/shiny-semantic-tabset.js b/inst/www/shiny-semantic-tabset.js
index 2db2ee83..2fc418fb 100644
--- a/inst/www/shiny-semantic-tabset.js
+++ b/inst/www/shiny-semantic-tabset.js
@@ -2,15 +2,25 @@ var semanticTabset = new Shiny.InputBinding();
 
 $.extend(semanticTabset, {
   find: function(scope) {
-    return $(scope).find('.ui.menu.sem');
+    return $(scope).find('.ss-menu');
   },
-  initialize: function(el){
-    $(el).find('.item').tab();
+
+  initialize: function(el) {
+    if (el.classList.contains('navbar-page-menu') && el.dataset.hashHistory === 'true') {
+      $(el).find('a.item').tab({
+        history: true,
+        historyType: 'hash'
+      });
+    } else {
+      $(el).find('.item').tab();
+    }
   },
+
   getValue: function(el) {
     var tabsetVal = $(el).find('.active.item').attr('data-tab');
     return tabsetVal;
   },
+
   subscribe: function(el, callback) {
     $(el).on('change', function(event) {
       $(this).trigger('shown');
@@ -21,6 +31,7 @@ $.extend(semanticTabset, {
       callback();
     });
   },
+
   receiveMessage: function(el, data) {
     var tab_id;
     if (data.hasOwnProperty('selected'))
@@ -28,9 +39,23 @@ $.extend(semanticTabset, {
     $(el).find('.item').tab('change tab', tab_id);
     $(el).trigger('change');
   },
+
   unsubscribe: function(el) {
     $(el).off();
   }
 });
 
 Shiny.inputBindings.register(semanticTabset, 'shiny.semanticTabset');
+
+Shiny.addCustomMessageHandler('toggleSemanticNavbarTab', function(message) {
+  var tabs = $(`#${message.id}`).find('.item');
+  var sel_tab = tabs.filter((index, element) => $(element).data('tab') === `${message.target}`);
+
+  if (message.toggle === 'hide') {
+    sel_tab.transition(message.toggle);
+    sel_tab.addClass('hidden-item');
+  } else {
+    sel_tab.removeClass('hidden-item');
+    sel_tab.transition(message.toggle);
+  }
+});
diff --git a/inst/www/shiny-semantic.css b/inst/www/shiny-semantic.css
new file mode 100644
index 00000000..f2936d8a
--- /dev/null
+++ b/inst/www/shiny-semantic.css
@@ -0,0 +1,18 @@
+/* Navbar Page Visibility */
+@media only screen and (min-width: 768px) {
+  .navbar-page-menu .collapsed-hamburger-icon {
+    display: none!important;
+  }
+}
+
+.ui.menu.navbar-page-menu .item>.collapsed-hamburger-icon {
+  position: absolute;
+  right: 0;
+  top: 0;
+  margin-right: 1px;
+  margin-top: 1px;
+}
+
+.ui.menu .item.hidden.navbar-collapsible-item {
+  display: none;
+}
diff --git a/inst/www/shiny-semantic.js b/inst/www/shiny-semantic.js
new file mode 100644
index 00000000..56f2220d
--- /dev/null
+++ b/inst/www/shiny-semantic.js
@@ -0,0 +1,17 @@
+$(document).ready(function() {
+  $('.collapsed-hamburger-icon').on('click', function() {
+    $('.navbar-collapsible-item:not(.hidden-item)').transition('fade down');
+  });
+
+  if (window.innerWidth < 768) {
+    $('.navbar-collapsible-item').transition('hide');
+  }
+
+  window.addEventListener('resize', function(event) {
+    if (window.innerWidth >= 768) {
+      $('.navbar-collapsible-item:not(.hidden-item)').transition('show');
+    } else {
+      $('.navbar-collapsible-item:not(.hidden-item)').transition('hide');
+    }
+  }, true);
+});
diff --git a/man/navbar_menu.Rd b/man/navbar_menu.Rd
new file mode 100644
index 00000000..47e48f6c
--- /dev/null
+++ b/man/navbar_menu.Rd
@@ -0,0 +1,32 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/navbarPage.R
+\name{navbar_menu}
+\alias{navbar_menu}
+\title{Navbar Menu}
+\usage{
+navbar_menu(title, ..., id = title, icon = NULL)
+}
+\arguments{
+\item{title}{Display title for menu}
+
+\item{...}{\code{\link{tab_panel}} elements to include in the page. Can also include strings as section headers,
+or "----" as a horizontal separator.}
+
+\item{id}{The ID of the \code{navbar_menu}}
+
+\item{icon}{Optional icon to appear on the tab.
+This attribute is only valid when using a \code{tab_panel} within a \code{\link{navbar_page}}.}
+}
+\description{
+Create a dropdown menu for a \code{\link{navbar_page}}.
+}
+\examples{
+navbar_menu(
+  "Menu",
+  tab_panel("Summary", shiny::plotOutput("plot")),
+  "----",
+  "Section header",
+  tab_panel("Table", shiny::tableOutput("table"))
+)
+
+}
diff --git a/man/navbar_page.Rd b/man/navbar_page.Rd
new file mode 100644
index 00000000..15e844f4
--- /dev/null
+++ b/man/navbar_page.Rd
@@ -0,0 +1,105 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/navbarPage.R
+\name{navbar_page}
+\alias{navbar_page}
+\title{Semantic UI page with top level navigation bar}
+\usage{
+navbar_page(
+  ...,
+  title = "",
+  id = NULL,
+  selected = NULL,
+  position = c("", "top fixed", "bottom fixed"),
+  header = NULL,
+  footer = NULL,
+  collapsible = FALSE,
+  window_title = title,
+  class = "stackable",
+  theme = NULL,
+  enable_hash_state = TRUE,
+  suppress_bootstrap = TRUE
+)
+}
+\arguments{
+\item{...}{Other arguments to be added as attributes of the main div tag wrapper (e.g. style, class etc.)}
+
+\item{title}{A title to display in the navbar.}
+
+\item{id}{ID of the navbar menu. Given random ID if none specified.}
+
+\item{selected}{Which tab should be selected first? If none selected, will automatically have the first tab open.}
+
+\item{position}{Determines the location and behaviour of the navbar. Padding will be included when pinned to prevent
+overlap.
+\itemize{
+\item{""}{Default. Top of page, and goes out of view when scrolling}
+\item{"top fixed"}{Top of page, pinned when scrolling}
+\item{"bottom fixed"}{Bottom of page, pinned when scrolling}
+}}
+
+\item{header}{Optional list of tags to be added to the top of all \code{tab_panel}s.}
+
+\item{footer}{Optional list of tags to be added to the bottom of all \code{tab_panel}s.}
+
+\item{collapsible}{\code{TRUE} to automatically collapse the navigation elements into a menu when the width of the
+browser is less than 768 pixels (useful for viewing on smaller touchscreen device)}
+
+\item{window_title}{A title to display in the browser's title bar. By default it will be the same as the navbar
+title.}
+
+\item{class}{Additional classes to be given to the navbar menu. Defaults to \code{"stackable"}. For optional classes
+have a look in details}
+
+\item{theme}{Theme name or path. Full list of supported themes you will find in
+\code{SUPPORTED_THEMES} or at http://semantic-ui-forest.com/themes.}
+
+\item{enable_hash_state}{boolean flag that enables a different hash in the URL for each tab, and creates historical
+events}
+
+\item{suppress_bootstrap}{boolean flag that supresses bootstrap when turned on}
+}
+\description{
+This creates a Semantic page for use in a Shiny app. It is in the same layout as \code{\link[shiny]{navbarPage}},
+where a top level navigation bar exists.
+}
+\details{
+Inside, it uses two crucial options:
+
+(1) \code{shiny.minified} with a logical value, tells whether it should attach min or full
+semnatic css or js (TRUE by default).
+(2) \code{shiny.custom.semantic} if this option has not NULL character \code{semanticPage}
+takes dependencies from custom css and js files specified in this path
+(NULL by default). Depending on \code{shiny.minified} value the folder should contain
+either "min" or standard version. The folder should contain: \code{semantic.css} and
+\code{semantic.js} files, or \code{semantic.min.css} and \code{semantic.min.js}
+in \code{shiny.minified = TRUE} mode.
+
+The following classes can be applied to the navbar:
+\itemize{
+\item{\code{stackable}} - When the width of the webpage becomes too thin, for example on mobile, the navbar will
+become a stack
+\item{\code{inverted}} - Will create an inverted coloured navbar
+}
+}
+\examples{
+navbar_page(
+  title = "App Title",
+  tab_panel("Plot"),
+  tab_panel("Summary"),
+  tab_panel("Table")
+)
+
+navbar_page(
+  title = "App Title",
+  tab_panel("Plot"),
+  tab_panel("Icon", icon = "r project"),
+  navbar_menu(
+    "More",
+    tab_panel("Summary"),
+    "----",
+    "Section header",
+    tab_panel("Table")
+  )
+)
+
+}
diff --git a/man/tab_panel.Rd b/man/tab_panel.Rd
new file mode 100644
index 00000000..59629f6c
--- /dev/null
+++ b/man/tab_panel.Rd
@@ -0,0 +1,44 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/navbarPage.R
+\name{tab_panel}
+\alias{tab_panel}
+\title{Tab Panel}
+\usage{
+tab_panel(
+  title,
+  ...,
+  value = title,
+  icon = NULL,
+  type = "bottom attached segment"
+)
+}
+\arguments{
+\item{title}{Display title for tab}
+
+\item{...}{UI elements to include within the tab}
+
+\item{value}{The value that should be sent when \code{\link{navbar_menu}} reports that this tab is selected.
+If omitted and \code{\link{navbar_menu}} has an id, then the title will be used.}
+
+\item{icon}{Optional icon to appear on the tab.
+This attribute is only valid when using a \code{tab_panel} within a \code{\link{navbar_page}}.}
+
+\item{type}{Change depending what type of tab is wanted. Default is \code{bottom attached segment}.}
+}
+\value{
+A tab that can be passed to \code{\link{navbar_menu}}.
+}
+\description{
+Create a tab panel
+}
+\examples{
+navbar_menu(
+  tab_panel("Plot", shiny::plotOutput("plot")),
+  tab_panel("Summary", shiny::verbatimTextOutput("summary")),
+  tab_panel("Table", shiny::tableOutput("table"))
+)
+
+}
+\seealso{
+\code{\link{navbar_menu}}
+}
diff --git a/man/tab_visibility.Rd b/man/tab_visibility.Rd
new file mode 100644
index 00000000..c1380790
--- /dev/null
+++ b/man/tab_visibility.Rd
@@ -0,0 +1,48 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/navbarPage.R
+\name{show_tab}
+\alias{show_tab}
+\alias{hide_tab}
+\title{Show/Hide Tab}
+\usage{
+show_tab(session = shiny::getDefaultReactiveDomain(), id, target)
+
+hide_tab(session = shiny::getDefaultReactiveDomain(), id, target)
+}
+\arguments{
+\item{session}{The \code{session} object passed to function given to \code{shinyServer}.}
+
+\item{id}{The id of the navbar object}
+
+\item{target}{The tab value to toggle visibility}
+}
+\description{
+Dynamically show or hide a \code{\link{tab_panel}} or \code{navbar_menu}
+}
+\examples{
+if (interactive()) {
+  library(shiny)
+  library(shiny.semantic)
+
+  ui <- navbar_page(
+    title = "App Title",
+    id = "navbar",
+    tab_panel(
+      "Plot",
+      action_button("hide", "Hide Table"),
+      action_button("show", "Show Table"),
+      value = "plot"
+    ),
+    tab_panel("Summary", value = "summary"),
+    tab_panel("Table", value = "table")
+  )
+
+  server <- function(input, output, session) {
+    observeEvent(input$hide, hide_tab(session, "navbar", "table"))
+    observeEvent(input$show, show_tab(session, "navbar", "table"))
+  }
+
+  shinyApp(ui, server)
+}
+
+}
diff --git a/tests/testthat/test_navbar_page.R b/tests/testthat/test_navbar_page.R
new file mode 100644
index 00000000..15179aba
--- /dev/null
+++ b/tests/testthat/test_navbar_page.R
@@ -0,0 +1,38 @@
+context("navbar_page")
+
+testthat::test_that("navbar_page creates UI page", {
+  ui <- navbar_page(tab_panel("Panel"))
+
+  testthat::expect_s3_class(ui, "shiny.tag.list")
+})
+
+testthat::test_that("navbar_page with no panels errors", {
+  testthat::expect_error(navbar_page(), "No tabs detected")
+})
+
+testthat::test_that("navbar_page works with navbar_menu", {
+  menu <- navbar_menu(
+    "Menu",
+    tab_panel("Panel 1"),
+    tab_panel("Panel 2")
+  )
+
+  testthat::expect_s3_class(menu, "ssnavmenu")
+
+  ui <- navbar_page(menu)
+
+  testthat::expect_s3_class(ui, "shiny.tag.list")
+})
+
+testthat::test_that("selected works with tab name", {
+  ui <- navbar_page(
+    tab_panel("Panel 1"),
+    tab_panel("Panel 2"),
+    tab_panel("Panel 3"),
+    selected = "Panel 3"
+  )
+
+  # Will check whole of ui menu for a tab to be classed as active
+  body_tag <- which(sapply(ui, function(x) x$name == "body"))
+  testthat::expect_true(grepl("active", ui[[body_tag]]))
+})