Skip to main content

Notifications

Announcements

Welcome to the Power Platform Communities
Announcing Mentions and Quick Responses!
Give Back to the Community this Month
Join us in the Community for an AMA: December 12th Register Today
News and Announcements icon
Power Platform Community / Forums / Power Apps - Power Apps Pro Dev & ISV / Component Navbar Respo...
Power Apps - Power Apps Pro Dev & ISV
Answered

Component Navbar Responsive

(2) ShareShare
ReportReport
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
Categories:
Power Apps component framework
Screenshot 2024-1...
  • Suggested answer
    jpespena Profile Picture
    jpespena 287 on at
    Component Navbar Responsive
    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.
  • Verified answer
    KeithAtherton Profile Picture
    KeithAtherton 3,649 on at
    Component Navbar Responsive
    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.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Welcome to the Power Platform Communities
Announcing Mentions and Quick Responses!
Give Back to the Community this Month
Join us in the Community for an AMA: December 12th Register Today

Quick Links

November 2024 Newsletter…

November 2024 Community Newsletter…

Community Update Oct 28…

Power Platform Community Update…

Tuesday Tip #7 Community Profile Tips…

Welcome to a brand new series, Tuesday Tips…

more Community News

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 143,532

#2
RandyHayes Profile Picture

RandyHayes 76,308

#3
Pstork1 Profile Picture

Pstork1 64,050

Leaderboard

Featured topics

Community content - sample components, blogs etc. - Link to this page (http://aka.ms/PCFdemos)

Product updates

Microsoft Power Platform Community release plans