bulma_navbar: Bulma Navigation Bar

In tjpalanca/bulma.R: Bulma CSS Framework for R

Description

A responsive horizontal navbar that can support images, links, buttons, and dropdowns. The navbar component is a responsive and versatile horizontal navigation bar with the following structure:

• bulma_navbar() - main container

  • bulma_navbar_brand() - left side, always visible, usually contains the logo and important links/icons.

  • bulma_navbar_burger() - hamburger icon which toggles the navbar menu on touch devices.

  • bulma_navbar_menu() - right side, hidden on touch devices and visible only on desktop.

    • bulma_navbar_start() - left part of the menu

    • bulma_navbar_end() - right part of the menu

    • bulma_navbar_item() - each single item, either link or not

    • bulma_navbar_dropdown() - dropdown menu with items and dividers

    • bulma_navbar_link() - sibling of dropdown with an arrow

    • bulma_navbar_divider - dividing line inside a dropdown.

Navbar

Usage

bulma_navbar(
  ...,
  color = c("primary", "link", "info", "success", "warning", "danger", "white",
    "black", "light", "dark"),
  transparent = FALSE,
  spaced = FALSE,
  shadow = FALSE,
  fixed = c("top", "bottom"),
  tag = tags$nav
)

bulma_navbar_brand(..., tag = tags$div)

bulma_navbar_burger(target_id = NULL, ..., tag = tags$a)

bulma_navbar_menu(..., active = FALSE, tag = tags$div)

bulma_navbar_start(..., tag = tags$div)

bulma_navbar_end(..., tag = tags$div)

bulma_navbar_item(
  ...,
  dropdown = FALSE,
  expanded = FALSE,
  dropdown_hoverable = FALSE,
  dropdown_active = FALSE,
  dropdown_right = FALSE,
  dropdown_dropup = FALSE,
  tab = FALSE,
  tag = if (dropdown) tags$div else tags$a
)

bulma_navbar_divider(tag = tags$hr)

bulma_navbar_link(..., arrow = TRUE, tag = tags$a)

bulma_navbar_dropdown(..., boxed = FALSE, tag = tags$div)

Arguments

...	(tags) content
color	(string) color
transparent	(flag) transparent navbar to seamlessly integrate the navbar in any visual context
spaced	(flag) adds extra spacing around the navbar
shadow	(flag) adds a small amount of shadow around the navbar
fixed	(string) whether the navbar is fixed to the top or bottom of the screen. This also adds a property to the body so that the viewport contains an adjustment.
tag	default HTML tag
target_id	(string) ID target that this burger will make more visible
active	(flag) whether or not this is visible all the time
dropdown	(flag) dropdown
expanded	(flag) extend to full width
dropdown_hoverable	(flag) activate dropdown on hover
dropdown_active	(flag) is dropdown activated
dropdown_right	(flag) is dropdown right aligned
dropdown_dropup	(flag) is dropdown going up (for bottom navbar)
tab	(flag) whether this appears like a tab.
arrow	(flag) whether or not the arrow should exist
boxed	(flag) boxed appearance for the dropdown

Functions

• bulma_navbar: main container

• bulma_navbar_brand: brand, always visible on all breakpoints

• bulma_navbar_burger: burger menu that is supposed to make the navbar appear on mobile

• bulma_navbar_menu: main navbar, hidden on mobile (unless burgered). Contains bulma_navbar_start() and bulma_navbar_end().

• bulma_navbar_start: left part of the menu

• bulma_navbar_end: right part of the menu

• bulma_navbar_item: a navigation item, link or not

• bulma_navbar_divider: divider item, horizontal rule

• bulma_navbar_link: link beside the dropdown

• bulma_navbar_dropdown: dropdown inside the dropdown item

See Also

Other Bulma Components: bulma_breadcrumb(), bulma_card(), bulma_dropdown(), bulma_menu(), bulma_message(), bulma_modal(), bulma_pagination(), bulma_panel(), bulma_tabs()

tjpalanca/bulma.R documentation built on Dec. 23, 2021, 10:58 a.m.