NavMenu oriented to bottom and collapsable

[JasonWeise]

Hi All

Is there a way to have the NavMenu oriented across the bottom of the screen rather than vertically down one side?
I have a need for a collapsible full width app bar that is at the bottom of the screen and can be opened and closed but cannot find a good way to do it with FluentUI - blazor.

AppBar almost looked perfect but doesn't seem to be collapsible like NavMenu so neither seems to be suitable.

I am hoping it is just a skill issue on my end, but does anyone know if this is going to be possible?

[dvoituron]

You can insert your bar into a Splitter component to have the possibility to be collapsible.

[JasonWeise]

Hey @dvoituron

This looks like a very possible option.
I will have a need to change the style of the Splitter "collapse" buttons and was hoping I might be able to use the "center" bar as a collapse toggle.

Do you happen to know if these are achievable with the Splitter component?

I am evaluating FluentUI at the moment and still don't know all the in's and out's but love what I see so far, so hopefully I can make this work.

Thanks again.

[dvoituron]

For the FluentMultiSplitter component, you can customize the colors using these CSS variables.

.fluent-multi-splitter {
    /* Resize Icon colors */
    --fluent-multi-splitter-color: var(--neutral-stroke-strong-rest);
    --fluent-multi-splitter-color-active: var(--neutral-stroke-strong-hover);
     /* Bar colors */
    --fluent-multi-splitter-background-color: var(--neutral-stroke-rest);
    --fluent-multi-splitter-background-color-active: var(--neutral-stroke-hover);
    --fluent-multi-splitter-hover-opacity: 0.8;

    /* Bar size */
    --fluent-multi-splitter-bar-size: 8px;
}
```css

For the icons, you can override some CSS styles:
E.g.
```css
.fluent-multi-splitter[orientation="horizontal"] ::deep > .fluent-multi-splitter-bar > span[part="collapse"]:before {
   content: '\025C0';            
}

See https://github.com/microsoft/fluentui-blazor/blob/dev/src/Core/Components/Splitter/FluentMultiSplitter.razor.css