Fluentui: Microsoft suite header/navbar component

[rhalaly]

Component details

Description

The standard Microsoft black Navbar component.

Which product teams/scenarios need this control

I think that each Microsoft product can use that thing instead of implement it from scratch.

Design assets

Standard Microsoft Navbar component

Component ownership

No

Component composition

Imports/Dependencies

Not as I see it. It depends on other Fabric components

Exports/Component breakdown

Navbar, Navbar Button, Navbar Brand, Navbar Search, Navbar Waffle, Navbar.Persona etc.
Similar to Bootstrap: https://getbootstrap.com/docs/4.0/components/navbar/

Intended package/s

Component code

Example code

<Navbar class="navbar navbar-expand-lg navbar-light bg-light">
  <Navbar.Waffle />
  <Navbar.Brand>Navbar</Navbar.Brand>
  <Navbar.ActionsCollection>
    <Navbar.Action iconName="Smile">Feedback</Navbar.Action>
    <Navbar.Action iconName="Plus" collapse={Always/Never/IfNecessary}>Add new ...</Navbar.Action>
  </Navbar.ActionsCollection>
   <Navbar.Persona name="Foo Baz" links={[...]}>Add</Navbar.Persona>
</Navbar>

Public methods

Slots

Tokens

Props

Let you to decide :)

Component Progress

Current state

Todos

• [ ] Add Todos

Steps

• [ ] Themable
• [ ] Unit tests
• [ ] Visual tests
• [ ] Documentation and examples
• [ ] Keyboard Accessible
• [ ] High Constrast Support
• [ ] RTL Support
• [ ] Design Review
• [ ] API review
• [ ] Public Preview
• [ ] Ready for Publishing

[kenotron]

I'm sure we have a need for this, and it's been brought up multiple times at least internally. I am placing this as a feature request / backlog review.

[bluefire2121]

What's the time frame for this feature and is there a recommended alternative in the meantime?

[ecraig12345]

Since this component is highly specific to 1st-party Microsoft products, it's not something that really makes sense to add to a public library like Fluent UI React. We also already have a shared implementation of this component internally--if any internal teams need more info about where to find this, please email me and I'll connect you to the right people.