Fomantic UI page with top level navigation bar

Source: R/navbarPage.R

This creates a Fomantic page for use in a Shiny app. It is in the same layout as navbarPage, where a top level navigation bar exists.

navbar_page(
  ...,
  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
)

Arguments

...

Other arguments to be added as attributes of the main div tag wrapper (e.g. style, class etc.)

title

A title to display in the navbar.

id

ID of the navbar menu. Given random ID if none specified.

selected

Which tab should be selected first? If none selected, will automatically have the first tab open.

position

Determines the location and behaviour of the navbar. Padding will be included when pinned to prevent overlap.

  • ""Default. Top of page, and goes out of view when scrolling

  • "top fixed"Top of page, pinned when scrolling

  • "bottom fixed"Bottom of page, pinned when scrolling

head

Optional list of tags to be added to tags$head.

header

Optional list of tags to be added to the top of all tab_panels.

footer

Optional list of tags to be added to the bottom of all tab_panels.

collapsible

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)

window_title

A title to display in the browser's title bar. By default it will be the same as the navbar title.

class

Additional classes to be given to the navbar menu. Defaults to "stackable". For optional classes have a look in details

theme

Theme name or path. Full list of supported themes you will find in SUPPORTED_THEMES or at https://semantic-ui-forest.com/themes.

enable_hash_state

boolean flag that enables a different hash in the URL for each tab, and creates historical events

suppress_bootstrap

boolean flag that suppresses bootstrap when turned on

Value

A shiny.tag.list containing the UI for a shiny application.

Details

Inside, it uses two crucial options:

(1) shiny.minified with a logical value, tells whether it should attach min or full semantic css or js (TRUE by default). (2) shiny.custom.semantic if this option has not NULL character semanticPage takes dependencies from custom css and js files specified in this path (NULL by default). Depending on shiny.minified value the folder should contain either "min" or standard version. The folder should contain: semantic.css and semantic.js files, or semantic.min.css and semantic.min.js in shiny.minified = TRUE mode.

The following classes can be applied to the navbar:

  • stackable - When the width of the webpage becomes too thin, for example on mobile, the navbar will become a stack

  • inverted - Will create an inverted coloured navbar

Examples

navbar_page(
  title = "App Title",
  tab_panel("Plot"),
  tab_panel("Summary"),
  tab_panel("Table")
)
#> <body style="margin:0;">
#>   <nav>
#>     <div class="ui menu ss-menu navbar-page-menu  stackable" id="navbar_menu_hbnknsufxz" data-hash-history="true">
#>       <div class="item">App Title</div>
#>       <a class="navbar-collapsible-item active item" data-tab="Plot">Plot</a>
#>       <a class="navbar-collapsible-item item" data-tab="Summary">Summary</a>
#>       <a class="navbar-collapsible-item item" data-tab="Table">Table</a>
#>     </div>
#>   </nav>
#>   <div style="">
#>     <header></header>
#>     <main>
#>       <div class="ui tab bottom attached segment active" data-title="Plot" data-tab="Plot"></div>
#>       <div class="ui tab bottom attached segment" data-title="Summary" data-tab="Summary"></div>
#>       <div class="ui tab bottom attached segment" data-title="Table" data-tab="Table"></div>
#>     </main>
#>     <footer></footer>
#>   </div>
#> </body>

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")
  )
)
#> <body style="margin:0;">
#>   <nav>
#>     <div class="ui menu ss-menu navbar-page-menu  stackable" id="navbar_menu_uupgsexnch" data-hash-history="true">
#>       <div class="item">App Title</div>
#>       <a class="navbar-collapsible-item active item" data-tab="Plot">Plot</a>
#>       <a class="navbar-collapsible-item item" data-tab="Icon">
#>         <i class="r project icon"></i>
#>         Icon
#>       </a>
#>       <div class="ui dropdown item navbar-collapisble-item dropdown_name_More" data-tab="More">
#>         More
#>         <i class="dropdown icon"></i>
#>         <div class="menu">
#>           <a class="navbar-collapsible-item item" data-tab="Summary">Summary</a>
#>           <div class="divider"></div>
#>           <div class="header">Section header</div>
#>           <a class="navbar-collapsible-item item" data-tab="Table">Table</a>
#>         </div>
#>       </div>
#>       <script>$('.ui.dropdown.dropdown_name_More').dropdown({});</script>
#>     </div>
#>   </nav>
#>   <div style="">
#>     <header></header>
#>     <main>
#>       <div class="ui tab bottom attached segment active" data-title="Plot" data-tab="Plot"></div>
#>       <div class="ui tab bottom attached segment" data-title="Icon" data-tab="Icon" data-icon="r project"></div>
#>       <div class="ui tab bottom attached segment" data-title="Summary" data-tab="Summary"></div>
#>       <div class="ui tab bottom attached segment" data-title="Table" data-tab="Table"></div>
#>     </main>
#>     <footer></footer>
#>   </div>
#> </body>