Predix_Logo
  • Categories
    • Questions
    • Predix | Updates
      • Pricing
      • Product
    • Deloitte - Private
    • How-To
    • Accenture-Private
  • Explore
    • Topics
    • Questions
    • Articles
    • Feedback or Feature Requests
  • Sign in
  • Home /
  • Questions /
avatar image
0
Question by kylepatrick.linhardt@ge.com · Aug 08, 2017 at 09:45 AM · pxpx-app-navnavigationpredix-starter-kit

Horizontal px-app-nav in predix-webapp-starter

I'm using the predix-webapp-starter and I would like to have a horizontal nav menu right under the branding header.

The starter app has a vertical menu bar with an accordion button that expands/contracts the menu.

The docs suggest that the px-app-nav component is horizontal by default.

This is my nav-code:

     <px-app-nav
       nav-items="[[navItems]]"
       path-prefix="[[pathPrefix]]">
     </px-app-nav>

Here are the nav-items:

    navItems: {
           type: Array,
           value: function() {
             return [
               {
                 "label": "Home",
                 "path": "/home",
                 "icon": "fa-home"
               },
               {
                 "label": "Configuration",
                 "path": "/config",
                 "icon": "fa-wrench"
               }
          ]
       }
 }

Can someone tell me what I need to add to my px-app-nav element to have the link list items be next to each other on the nav bar instead of on top of each other?

I can manually modify the css and html, but it seems like this defeats the purpose of having this prebuilt element.

How it is currently alt text

How I would like it to look alt text

navbar2.png (9.2 kB)
navbar.png (9.8 kB)
Comment
Add comment
10 |1200 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

1 Reply

  • Sort: 
avatar image
0
Best Answer

Answer by Randy Askin · Aug 08, 2017 at 09:53 AM

We recently launched a system-wide redesign to spruce up the look and feel of all of our Predix components, however the predix-webapp-starter has not yet been updated to use these new "refreshed" components. The horizontal navigation configuration was added as part of this refresh effort in px-app-nav version 2.0.0. You can use the version finder here to upgrade all of your dependencies to the latest versions (but note that some functionality of the webapp-starter will likely break) or continue to use the previous version of px-app-nav without the horizontal configuration and refer to the documentation at archive.predix-ui.com on the pre-refresh component.

Comment
Add comment · Show 1 · Share
10 |1200 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image kylepatrick.linhardt@ge.com · Aug 08, 2017 at 10:12 AM 0
Share

Randy,

Thank you for the help.

I'll try to upgrade px-app-nav to v2.0.0.

Follow this Question

Answers Answers and Comments

76 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

px components style won't load in e11 4 Answers

How to pass data between routes in app based on predix-ui-seed? 2 Answers

px-app-nav menu loading issue 1 Answer

px-app-nav; routes names blink while collapsing px-app-nav 2 Answers

Children in px-app-nav 1 Answer

GE Monogram
  • Legal
  • Cookies
  • Forum Terms
  • Contact Us
  • Copyright © 2017 General Electric Company. All rights reserved.


Enterprise
Social Q&A

  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Create an article
  • Submit your feedback or feature request
  • Categories
  • Questions
  • Predix | Updates
    • Pricing
    • Product
  • Deloitte - Private
  • How-To
  • Accenture-Private
  • Explore
  • Topics
  • Questions
  • Articles
  • Feedback or Feature Requests