{"id":15048733,"url":"https://github.com/parksben/markdown-navbar","last_synced_at":"2025-04-06T09:08:02.434Z","repository":{"id":37735741,"uuid":"122824204","full_name":"parksben/markdown-navbar","owner":"parksben","description":"Best markdown navigation bar for React.","archived":false,"fork":false,"pushed_at":"2023-08-30T02:03:48.000Z","size":3258,"stargazers_count":152,"open_issues_count":13,"forks_count":37,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-30T07:09:00.701Z","etag":null,"topics":["customized","markdown-navbar","react-component"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/parksben.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-25T10:02:11.000Z","updated_at":"2025-02-18T10:40:41.000Z","dependencies_parsed_at":"2024-06-18T15:37:03.526Z","dependency_job_id":"5389f750-2ea6-44a2-a7f2-bcd837ccf766","html_url":"https://github.com/parksben/markdown-navbar","commit_stats":{"total_commits":68,"total_committers":6,"mean_commits":"11.333333333333334","dds":0.4411764705882353,"last_synced_commit":"e2dba6f8f1ea4a1d5e5cabffa242d2730529e5b8"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parksben%2Fmarkdown-navbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parksben%2Fmarkdown-navbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parksben%2Fmarkdown-navbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parksben%2Fmarkdown-navbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/parksben","download_url":"https://codeload.github.com/parksben/markdown-navbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247457801,"owners_count":20941906,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["customized","markdown-navbar","react-component"],"created_at":"2024-09-24T21:15:49.602Z","updated_at":"2025-04-06T09:08:02.410Z","avatar_url":"https://github.com/parksben.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Markdown-Navbar\n\n![npm](https://img.shields.io/npm/l/markdown-navbar.svg)\n![npm](https://img.shields.io/npm/dt/markdown-navbar.svg)\n![npm](https://img.shields.io/npm/v/markdown-navbar/latest.svg)\n![GitHub file size in bytes](https://img.shields.io/github/size/parksben/markdown-navbar/src/index.js)\n\nA React component renders an interactive navbar panel of Markdown docs for your blog or website.\n\n[![Demo on Netlify](https://screenshots.codesandbox.io/e7e0n.png)](https://csb-e7e0n.netlify.com/)\n\n## Features\n\nImplement some regular functions easily by using this component, such as:\n\n- Display the structure tree of your article defined by the headings.\n- Render anchors that navigate to specific headings in the article.\n- Share one URL to readers to navigate to a specific area of the article.\n\n## Install\n\n```bash\nyarn add markdown-navbar # or `npm i markdown-navbar --save`\n```\n\n## Quickstart\n\n[![Edit markdown-navbar-demo-online](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/markdown-navbar-demo-online-e7e0n?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n// One third-part component for render markdown documentation\nimport ReactMarkdown from 'react-markdown';\nimport MarkdownNavbar from 'markdown-navbar';\n// The default style of markdown-navbar should be imported additionally\nimport 'markdown-navbar/dist/navbar.css';\n\nconst article = `# Markdown-Navbar Demo\n\n## Chicken Chicken\n\nChicken Chicken Chicken Chicken Chicken.\n\n* Chicken Chicken Chicken Chicken Chicken.\n* Chicken Chicken Chicken Chicken Chicken.\n* Chicken Chicken Chicken Chicken Chicken.\n\n### Chicken Chicken Chicken\n\nChicken Chicken Chicken Chicken Chicken.\n\n#### Chicken Chicken Chicken Chicken\n\nChicken Chicken Chicken Chicken Chicken Chicken.`;\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cdiv className=\"article\"\u003e\n        \u003cReactMarkdown source={article} /\u003e\n      \u003c/div\u003e\n      \u003cdiv className=\"navigation\"\u003e\n        \u003cMarkdownNavbar source={article} /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n## Tips\n\n- The component only parses article headings at level 2 and below. The article title, which is usually used once in an article, will not appear in the navigation bar.\n- The component needs to be used in **conjunction** with your article content. When using this component, you must ensure that your article under the same page content.\n- Please confirm that every heading of your markdown document is different by each other when the value of property `declarative` is setted as `true`.\n\n## Props\n\n|     Property     | Data Type |           Default Value           |                                       Description                                        |\n| :--------------: | :-------: | :-------------------------------: | :--------------------------------------------------------------------------------------: |\n|    className     |  string   |                \"\"                 |               The className that defines the outermost container of navbar               |\n|      source      |  string   |                \"\"                 |                                  Markdown text content                                   |\n| headingTopOffset |  number   |                 0                 |       Anchor displacement relative to the top of the window (for the anchor jump)        |\n|  updateHashAuto  |  boolean  |               true                |    Automatically update the hash value of browser address when page scrolling if true    |\n|   declarative    |  boolean  |               false               | Use the text of the title from Markdown content as the hash value for the anchor if true |\n|     ordered      |  boolean  |               true                |           Whether the title contains a numerical prefix, such as: `1. 2. 2.2`            |\n|  onNavItemClick  | function  | (event, element, hashValue) =\u003e {} |                  The event callback function after clicking navbar item                  |\n|   onHashChange   | function  |     (newHash, oldHash) =\u003e {}      |      The event callback function before the hash value of browser address changing       |\n\n## License\n\n[MIT license](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparksben%2Fmarkdown-navbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparksben%2Fmarkdown-navbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparksben%2Fmarkdown-navbar/lists"}