Bar

The bar() is a container which is primarily used to hold titles, buttons and input elements and its design and functionality is the basis for page headers and footers. The component consists of three areas to hold its content - startContent slot, default slot and endContent slot. It has the capability to center content, such as a title, while having other components on the left and right side.

See the official documention for bar, for all the correct props.

bar(
  design = "Header",
  label(
    "Bar"
  ),
  button(
    "btn2",
    icon = "home",
    tooltip = "Go home",
    design = "Transparent",
    slot = "startContent",
    `data-ui5-nav` = "firstNav"
  ),
  button(
    "btn2",
    icon = "add",
    tooltip = "Go home",
    design = "Transparent",
    slot = "startContent",
    `data-ui5-nav` = "thirdNav"
  ),
  button(
    "btn3",
    icon = "action-settings",
    tooltip = "Some settings",
    slot = "endContent",
    `data-ui5-nav` = "secondNav"
  )
)

Bar