web

You’re offline. This is a read only version of the page.

News and Announcements icon

Power Platform CommunityForums Power Apps Component Navbar Respo...

Power Apps

Answered

Component Navbar Responsive

(2) Share

Report

Report

Posted on by DamoneH

6

Hello Members

Currently building a navbar in PowerApps but most of the resources I have gone through for navbars built in components aren't responsive

Looked at these two which are really good just looking for resources on how to make it responsive

Resource 1: https://lnkd.in/dVQAs4sT

Resource 2: https://lnkd.in/dYYbKVxP

I am aware of building the navbars with galleries and containers in screens but looking into navbars in components that are responsive

Thank you

Screenshot 2024-11-04 095650.png

Categories:

Power Apps Pro Dev & ISV

All responses Img

All responses (2)

Answers Img

Answers (1)

Sort by

Verified answer

KeithAtherton 3,709 Most Valuable Professional on at

Like
a
(0)

Report
Copy link

Link copied!

Hey. Try using a Horizontal container control which "stacks" controls when you add them to the container and set the Align in container property to Set by container, to make it responsive.

The navbar itself can be made responsive in relation to the screen by setting its Width property to Parent.Width.
Suggested answer

jpespena 335 on at

Like
a
(0)

Report
Copy link

Link copied!
Hi,

You can build a navbar in components and using galleries and containers. Just turn the "Access app scope" toggle ON to be able to access variables in the app.

To make it responsive, use App.ActiveScreen.Size property to automatically adjust navbar size when changing screen size.

Example

For the width of the navigation bar:
If( App.ActiveScreen.Size > 3, 296, If( App.ActiveScreen.Size > 2, 96, 296 ) )

With this code, navbar with will be this per screen size:

Desktop = 296

Tablet (horizontal) = 96

Tablet (vertical) = 296

Phone = 296

The reason I made the navbar width for tablet vertical and phone is because navbar are usually hidden on smaller screen size and shown as popup in its full width.

You can use a button with burger icon to control the visibility of the navbar when in smaller screens.

Join the conversation