https://github.com/nickrigby/silc-nav

Lightweight, responsive navigation component for silc framework
https://github.com/nickrigby/silc-nav

nav silc-framework typescript

Last synced: 2 months ago
JSON representation

Lightweight, responsive navigation component for silc framework

• Host: GitHub
• URL: https://github.com/nickrigby/silc-nav
• Owner: nickrigby
• License: mit
• Created: 2017-04-06T06:06:53.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2019-01-31T21:06:39.000Z (over 6 years ago)
• Last Synced: 2025-02-11T18:16:06.965Z (3 months ago)
• Topics: nav, silc-framework, typescript
• Language: CSS
• Homepage: https://silc.io
• Size: 348 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# silc nav [![Build Status](https://travis-ci.org/nickrigby/silc-nav.svg?branch=master)](https://travis-ci.org/nickrigby/silc-nav) [![npm version](https://badge.fury.io/js/silc-nav.svg)](https://badge.fury.io/js/silc-nav)

The nav component is an ultra-lightweight web component for the [silc framework](https://github.com/nickrigby/silc). The nav is collapsed by default — to work on smaller screens — with the ability to expand to a horizontal navigation with drop-downs.

## HTML

```html

    


        


            Item 1

            


                


                    Item 1.1

                    


                        
Item 1.1.1

                        
Item 1.1.2

                        


                            Item 1.1.3

                            


                                
Item 1.1.3.1

                                
Item 1.1.3.2

                                
Item 1.1.3.3

                            
     

                        

                    

                

                


                    Item 1.2

                    


                        
Item 1.2.1

                        


                            Item 1.2.2

                            


                                


                                    Item 1.2.2.1

                                    


                                        
Item 1.2.2.1.1

                                        
Item 1.2.2.1.2

                                        
Item 1.2.2.1.3

                                    
  

                                

                                
Item 1.2.2.2

                                
Item 1.2.2.3

                            
     

                        

                        
Item 1.2.3

                    
 

                

            

        

        


            Item 2

            


                


                    Item 2.1

                    


                        
Item 2.1.1

                        
Item 2.1.2

                        
Item 2.1.3

                    

                

                


                    Item 2.2

                    


                        
Item 2.2.1

                        
Item 2.2.2

                        
Item 2.2.3

                    
 

                

            

        

    


```

### BEM classes

BEM classes are added via JavaScript to ease integrations with third-party systems, and to enforce semantic markup. Classes are as follows:

```html

...

...

...

```


## Styling

As with all silc components, no deliberate style has been added. However, through a SASS fallback system, a number of [SASS variables](src/scss/_variables.scss) are available to easily apply design without having to write your own selectors.