• Home
• org.mvnpm.at.patternfly
• patternfly
• 6.0.0
• source code
• Nav.md

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

package.docs.demos.Nav.examples.Nav.md Maven / Gradle / Ivy

---
id: Navigation
section: components
---## Examples

### Default nav

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
              

              

                
                  
                    
                  
                
              
            
          
        
      
    
  
  

    

      
    
  
  

    

      

        

          
        
      
      

        

          

            
Main title
            
This is a full page demo.
          
        
      
      

        

          

            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
          
        
      
    
  


```

### Grouped nav

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
              

              

                
                  
                    
                  
                
              
            
          
        
      
    
  
  

    

      
    
  
  

    

      

        

          
        
      
      

        

          

            
Main title
            
This is a full page demo.
          
        
      
      

        

          

            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
          
        
      
    
  


```

### Expandable nav

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
              

              

                
                  
                    
                  
                
              
            
          
        
      
    
  
  

    

      
    
  
  

    

      

        

          
        
      
      

        

          

            
Main title
            
This is a full page demo.
          
        
      
      

        

          

            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
          
        
      
    
  


```

### Horizontal nav

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      

        
          
        
      
    
    

      

        

          

            

              
            

            

              

                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
              

              

                
                  
                    
                  
                
              
            
          
        
      
    
  
  

    

      

        

          
        
      
      

        

          

            
Main title
            
This is a full page demo.
          
        
      
      

        

          

            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
          
        
      
    
  


```

### Horizontal subnav

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
              

              

                
                  
                    
                  
                
              
            
          
        
      
    
  
  

    

      
    
  
  

    

      

        

          
        
      
      

        

          
        
      
      

        

          

            
Main title
            
This is a full page demo.
          
        
      
      

        

          

            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
          
        
      
    
  


```

### Horizontal nav with horizontal subnav

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              
            

            

              

                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
              

              

                
                  
                    
                  
                
              
            
          
        
      
    
  
  

    

      

        

          
        
      
      

        

          
        
      
      

        

          

            
Main title
            
This is a full page demo.
          
        
      
      

        

          

            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
          
        
      
    
  


```