npmpackage.info

Gathering detailed insights and metrics for @material/top-app-bar

Other packages similar to @material/top-app-bar

@material/mwc-top-app-bar

0.27.0

Material Design top app bar web component

@material/mwc-top-app-bar-fixed

0.27.0

Material Design top app bar web component

@smui/top-app-bar

8.0.0-beta.3

Svelte Material UI - Top App Bar

ember-cli-mdc-top-app-bar

3.1.0

ember-cli addon for @material/top-app-bar.

Gathering detailed insights and metrics for @material/top-app-bar

@material/top-app-bar - 14.0.0 | npmpackage.info

@material/top-app-bar

Modular and customizable Material Design UI components for the web

14.0.0

17,120

MIT

TypeScript

1.07 MB

3.3

Installations

npm install @material/top-app-bar

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

14.19.1

NPM Version

lerna/3.20.2/node@v14.19.1+x64 (linux)

Score

99.1

Supply Chain

99.6

Quality

83.3

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

5,120

Closed

1,314

Merged

3,806

Issues

Open

0

Total

2,928

Closed

2,928

Releases

v14.0.0

Updated on Apr 28, 2022

v13.0.0

Updated on Sep 24, 2021

v12.0.0

Updated on Jul 27, 2021

v11.0.0

Updated on Apr 15, 2021

v10.0.0

Updated on Feb 05, 2021

v9.0.0

Updated on Dec 29, 2020

View All 11 releases

Languages

TypeScript

SCSS

JavaScript

Shell

TypeScript (53.58%)

SCSS (45.16%)

JavaScript (1.16%)

Shell (0.1%)

Developer

material-components

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

17,120 Stars

7,462 Commits

2,144 Forks

371 Watchers

311 Branches

382 Contributors

Updated on Jul 10, 2025

Maintainers

View All 382 Contributors

Package Meta Information

Latest Version

14.0.0

Package Id

@material/top-app-bar@14.0.0

Unpacked Size

1.07 MB

Size

670.39 kB

File Count

NPM Version

lerna/3.20.2/node@v14.19.1+x64 (linux)

Node Version

14.19.1

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@material/animation @material/base @material/elevation @material/ripple @material/rtl @material/shape @material/theme @material/typography tslib

Note:

This project is no longer actively maintained. While automated updates may still occur, the team will not be prioritizing new features or bug fixes, and those updates will be turned off in the future.

For Angular users, our friends at Angular Material moved away from this library, and they expect that this may actually allow for faster iteration - see their blog post for more information.

Material Components for the web

Material Components for the web helps developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects.

Material Web strives to seamlessly incorporate into a wider range of usage contexts, from simple static websites to complex, JavaScript-heavy applications to hybrid client/server rendering systems. In short, whether you're already heavily invested in another framework or not, it should be easy to incorporate Material Components into your site in a lightweight, idiomatic fashion.

Material Components for the web is the successor to Material Design Lite. In addition to implementing the Material Design guidelines, it provides more flexible theming customization, not only in terms of color, but also typography, shape, states, and more. It is also specifically architected for adaptability to various major web frameworks.

NOTE: Material Components Web tends to release breaking changes on a monthly basis, but follows semver so you can control when you incorporate them. We typically follow a 2-week release schedule which includes one major release per month with breaking changes, and intermediate patch releases with bug fixes.

Quick start

Using via CDN

1<!-- Required styles for Material Web -->
2<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
3
4<!-- Render textfield component -->
5<label class="mdc-text-field mdc-text-field--filled">
6  <span class="mdc-text-field__ripple"></span>
7  <span class="mdc-floating-label" id="my-label">Label</span>
8  <input type="text" class="mdc-text-field__input" aria-labelledby="my-label">
9  <span class="mdc-line-ripple"></span>
10</label>
11
12<!-- Required Material Web JavaScript library -->
13<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
14<!-- Instantiate single textfield component rendered in the document -->
15<script>
16  mdc.textField.MDCTextField.attachTo(document.querySelector<HTMLElement>('.mdc-text-field'));
17</script>

Please see quick start demo on codepen for full example.

Using NPM

This guide assumes you have webpack configured to compile Sass into CSS. To configure webpack, please see the full getting started guide. You can also see the final code and result in the Material Starter Kit.

Install textfield node module to your project.

npm install @material/textfield

HTML

Sample usage of text field component. Please see Textfield component page for more options.

1<label class="mdc-text-field mdc-text-field--filled">
2  <span class="mdc-text-field__ripple"></span>
3  <input type="text" class="mdc-text-field__input" aria-labelledby="my-label">
4  <span class="mdc-floating-label" id="my-label">Label</span>
5  <span class="mdc-line-ripple"></span>
6</label>

CSS

Load styles required for text field component.

1@use "@material/floating-label/mdc-floating-label";
2@use "@material/line-ripple/mdc-line-ripple";
3@use "@material/notched-outline/mdc-notched-outline";
4@use "@material/textfield";
5
6@include textfield.core-styles;
7

JavaScript

Import MDCTextField module to instantiate text field component.

1import {MDCTextField} from '@material/textfield';
2const textField = new MDCTextField(document.querySelector<HTMLElement>('.mdc-text-field'));

This'll initialize text field component on a single .mdc-text-field element.

Please see quick start demo on glitch for full example.

Need help?

We're constantly trying to improve our components. If Github Issues don't fit your needs, then please visit us on our Discord Channel.

No vulnerabilities found.

10

License

Determines if the project has defined a license.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

3

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 3

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-canary.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release-canary.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-canary.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release-canary.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-canary.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release-canary.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-nightly.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release-nightly.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-nightly.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release-nightly.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-nightly.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release-nightly.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-pull-request.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release-pull-request.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-pull-request.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release-pull-request.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-pull-request.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release-pull-request.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release-pull-request.yml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release-pull-request.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:66: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/release.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:45: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:64: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:65: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:68: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:96: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:97: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:100: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/material-components/material-components-web/test.yml/master?enable=pin
Warn: npmCommand not pinned by hash: scripts/canary-release.sh:16
Info: 0 out of 26 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 2 third-party GitHubAction dependencies pinned
Info: 5 out of 6 npmCommand dependencies pinned

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

0

Fuzzing

Determines if the project uses fuzzing.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

113 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m
Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-jg8v-48h5-wgxg
Warn: Project is vulnerable to: GHSA-36fh-84j7-cv5h
Warn: Project is vulnerable to: GHSA-7x7c-qm48-pq9c
Warn: Project is vulnerable to: GHSA-rc3x-jf5g-xvc5
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-82v2-mx6x-wq7q
Warn: Project is vulnerable to: GHSA-6vfc-qv3f-vr6c
Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-px4h-xg32-q955
Warn: Project is vulnerable to: GHSA-x77j-w7wf-fjmw
Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3
Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4
Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-29xr-v42j-r956
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq
Warn: Project is vulnerable to: GHSA-mgfv-m47x-4wqp
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5
Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

3.3

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @material/top-app-bar

Other packages similar to @material/top-app-bar

@material/top-app-bar

Installations

Developer Guide

No

CommonJS

14.19.1

lerna/3.20.2/node@v14.19.1+x64 (linux)

Score

Pull Requests

0

5,120

1,314

3,806

Issues

0

2,928

2,928

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Material Components for the web

Important links

Quick start

Using via CDN

Using NPM

HTML

CSS

JavaScript

Need help?

10

10

10

3

3

0

0

0

0

0

0

0

3.3

/10